tyrell-components 1.0.0-RC12 → 1.0.0-RC14

package/lib/components/calendar-month.js

@@ -1,56 +1,11 @@
-/**
- * TyCalendarMonth Web Component
- * PORTED FROM: cljs/ty/components/calendar_month.cljs
- *
- * A stateless, property-driven calendar month renderer with customizable
- * day content and styling.
- *
- * Features:
- * - 42-day grid (6 weeks × 7 days) with Monday-first ordering
- * - Localized weekday headers
- * - Custom day content rendering via dayContentFn
- * - Custom day classes via dayClassesFn
- * - Custom CSS injection via customCSS
- * - Responsive width system (width, minWidth, maxWidth)
- * - Rich day-click events with full context
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-calendar-month
- *   display-year="2025"
- *   display-month="10"
- *   locale="en-US">
- * </ty-calendar-month>
- *
- * <!-- With custom rendering -->
- * <ty-calendar-month id="custom"></ty-calendar-month>
- * <script type="module">
- *   const cal = document.getElementById('custom');
- *   cal.dayContentFn = (ctx) => {
- *     const el = document.createElement('div');
- *     el.textContent = ctx.dayInMonth;
- *     return el;
- *   };
- * </script>
- * ```
- */
 import { ensureStyles } from '../utils/styles.js';
-import { calendarMonthStyles } from '../styles/calendar-month.js';
+import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
+import { calendarMonthStyles, calendarMonthCustomFlavorCss } from '../styles/calendar-month.js';
 import { getCalendarMonthDays, getLocalizedWeekdays, parseISODate } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
-// ============================================================================
-// Default Render Functions
-// ============================================================================
-/**
- * Default day content renderer - just the day number
- */
 function defaultDayContent(dayContext) {
     return dayContext.dayInMonth.toString();
 }
-/**
- * Default day classes based on day context
- */
 function getDefaultDayClasses(dayContext) {
     const classes = ['calendar-day'];
     if (dayContext.today)
@@ -63,19 +18,9 @@ function getDefaultDayClasses(dayContext) {
         classes.push('selected');
     return classes;
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Check if value is a DOM element
- */
 function isDOMElement(value) {
     return value instanceof HTMLElement;
 }
-/**
- * ISO date string ("YYYY-MM-DD") → UTC-midnight timestamp, matching
- * DayContext.value semantics. null when unset/invalid.
- */
 function isoToUTCTimestamp(iso) {
     if (!iso)
         return null;
@@ -84,49 +29,32 @@ function isoToUTCTimestamp(iso) {
         return null;
     return Date.UTC(parsed.year, parsed.month - 1, parsed.day);
 }
-/**
- * Normalize size value - add 'px' if just a number
- */
 function normalizeSizeValue(value) {
     if (!value || value === '')
         return null;
     const strValue = String(value);
-    // If it's just a number, add 'px'
     if (/^\d+(\.\d+)?$/.test(strValue)) {
         return `${strValue}px`;
     }
-    // Otherwise use as-is (supports %, rem, vw, etc.)
     return strValue;
 }
-// ============================================================================
-// Component Implementation
-// ============================================================================
-/**
- * TyCalendarMonth Web Component
- */
 export class TyCalendarMonth extends HTMLElement {
-    /**
-     * Observed attributes (minimal - mainly for debugging)
-     * Properties are the primary API
-     */
     static get observedAttributes() {
-        return ['locale', 'size', 'min', 'max'];
+        return ['locale', 'size', 'min', 'max', 'flavor'];
     }
     constructor() {
         super();
         this._locale = 'en-US';
         this._size = 'md';
-        // Initialize with current date
+        this._customFlavorSheet = null;
+        this._focusedIndex = null;
+        this._cellElements = [];
         const today = new Date();
         this._displayYear = today.getFullYear();
-        this._displayMonth = today.getMonth() + 1; // 1-based month
+        this._displayMonth = today.getMonth() + 1;
         this.attachShadow({ mode: 'open' });
     }
-    // ==========================================================================
-    // Lifecycle Methods
-    // ==========================================================================
     connectedCallback() {
-        // Set defaults if not already set
         if (!this._displayMonth) {
             this._displayMonth = new Date().getMonth() + 1;
         }
@@ -136,31 +64,27 @@ export class TyCalendarMonth extends HTMLElement {
         if (!this._locale) {
             this._locale = this.getAttribute('locale') || 'en-US';
         }
-        // Read size attribute if present
         const sizeAttr = this.getAttribute('size');
         if (sizeAttr && (sizeAttr === 'sm' || sizeAttr === 'md' || sizeAttr === 'lg')) {
             this._size = sizeAttr;
         }
-        // Check for dayContentFn set before upgrade
         const plainDayContentFn = this.dayContentFn;
         if (plainDayContentFn && !this._dayContentFn) {
             this._dayContentFn = plainDayContentFn;
-            delete this.dayContentFn; // Clean up plain property
+            delete this.dayContentFn;
         }
-        // Check for customCSS set before upgrade
         const plainCustomCSS = this.customCSS;
         if (plainCustomCSS && !this._customCSS) {
             this._customCSS = plainCustomCSS;
-            delete this.customCSS; // Clean up plain property
+            delete this.customCSS;
         }
-        // Setup locale observer to watch for ancestor lang changes
         this._localeObserver = observeLocaleChanges(this, () => {
             this.render();
         });
+        this._syncCustomFlavor();
         this.render();
     }
     disconnectedCallback() {
-        // Cleanup locale observer
         if (this._localeObserver) {
             this._localeObserver();
             this._localeObserver = undefined;
@@ -181,16 +105,20 @@ export class TyCalendarMonth extends HTMLElement {
             this[name === 'min' ? '_min' : '_max'] = newValue ?? undefined;
             this.render();
         }
+        else if (name === 'flavor') {
+            this._syncCustomFlavor();
+        }
+    }
+    _syncCustomFlavor() {
+        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getAttribute('flavor'), ({ base }) => calendarMonthCustomFlavorCss(base));
     }
-    // ==========================================================================
-    // Property Getters/Setters
-    // ==========================================================================
     get displayYear() {
         return this._displayYear;
     }
     set displayYear(value) {
         if (this._displayYear !== value) {
             this._displayYear = value;
+            this._focusedIndex = null;
             this.render();
         }
     }
@@ -200,6 +128,7 @@ export class TyCalendarMonth extends HTMLElement {
     set displayMonth(value) {
         if (this._displayMonth !== value) {
             this._displayMonth = value;
+            this._focusedIndex = null;
             this.render();
         }
     }
@@ -221,6 +150,15 @@ export class TyCalendarMonth extends HTMLElement {
             this.render();
         }
     }
+    get flavor() {
+        return this.getAttribute('flavor') || 'primary';
+    }
+    set flavor(value) {
+        if (value)
+            this.setAttribute('flavor', value);
+        else
+            this.removeAttribute('flavor');
+    }
     get width() {
         return this._width;
     }
@@ -294,12 +232,6 @@ export class TyCalendarMonth extends HTMLElement {
             this.render();
         }
     }
-    // ==========================================================================
-    // Width Property System
-    // ==========================================================================
-    /**
-     * Apply width-related properties as CSS custom properties
-     */
     applyWidthProperties() {
         const normalizedWidth = normalizeSizeValue(this._width);
         const normalizedMinWidth = normalizeSizeValue(this._minWidth);
@@ -323,9 +255,6 @@ export class TyCalendarMonth extends HTMLElement {
             this.style.removeProperty('--calendar-max-width');
         }
     }
-    /**
-     * Apply custom CSS to shadow root
-     */
     applyCustomCSS() {
         if (!this._customCSS || !this.shadowRoot)
             return;
@@ -334,23 +263,10 @@ export class TyCalendarMonth extends HTMLElement {
             this.shadowRoot.adoptedStyleSheets = [...existing, this._customCSS];
         }
     }
-    // ==========================================================================
-    // Public Methods
-    // ==========================================================================
-    /**
-     * Force re-render of the calendar month
-     * Useful when external data changes (e.g., async event loading)
-     */
     refresh() {
         this.render();
     }
-    // ==========================================================================
-    // Event Dispatching
-    // ==========================================================================
-    /**
-     * Dispatch day-click custom event with day context
-     */
-    dispatchDayClick(dayContext, domEvent) {
+    dispatchDayClick(dayContext, _domEvent) {
         const detail = {
             dayContext,
             value: dayContext.value,
@@ -362,7 +278,6 @@ export class TyCalendarMonth extends HTMLElement {
             isWeekend: dayContext.weekend,
             isOtherMonth: dayContext.otherMonth,
         };
-        // Dispatch both 'day-click' and 'day-select' (alias)
         for (const eventType of ['day-click', 'day-select']) {
             const event = new CustomEvent(eventType, {
                 detail,
@@ -372,112 +287,149 @@ export class TyCalendarMonth extends HTMLElement {
             this.dispatchEvent(event);
         }
     }
-    // ==========================================================================
-    // Rendering
-    // ==========================================================================
-    /**
-     * Render a single day cell
-     */
-    renderDayCell(dayContext, disabled) {
+    renderDayCell(dayContext, disabled, isRoving) {
         const dayElement = document.createElement('div');
-        // Get content using custom or default function
         const content = this._dayContentFn
             ? this._dayContentFn(dayContext)
             : defaultDayContent(dayContext);
-        // STRICT DOM-ONLY CHECK for custom functions
         if (this._dayContentFn && content && !isDOMElement(content) && typeof content !== 'string') {
             throw new Error(`Custom dayContentFn must return a DOM element or string, got: ${typeof content}. ` +
                 `Use document.createElement() to create DOM elements.`);
         }
-        // Apply default classes
         const classes = getDefaultDayClasses(dayContext);
         if (disabled)
             classes.push('disabled');
         dayElement.className = classes.join(' ');
-        // Set content
         if (typeof content === 'string') {
             dayElement.textContent = content;
         }
         else if (isDOMElement(content)) {
             dayElement.appendChild(content);
         }
-        // Add click handler (disabled days don't emit)
-        if (!disabled) {
+        dayElement.setAttribute('role', 'gridcell');
+        dayElement.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+            .format(new Date(dayContext.localValue)));
+        dayElement.setAttribute('aria-selected', String(!!dayContext.isSelected));
+        if (dayContext.today)
+            dayElement.setAttribute('aria-current', 'date');
+        if (disabled) {
+            dayElement.setAttribute('aria-disabled', 'true');
+            dayElement.setAttribute('tabindex', '-1');
+        }
+        else {
+            dayElement.setAttribute('tabindex', isRoving ? '0' : '-1');
             dayElement.addEventListener('pointerdown', (event) => {
                 event.preventDefault();
                 this.dispatchDayClick(dayContext, event);
             });
+            dayElement.addEventListener('keydown', (event) => {
+                const ke = event;
+                if (ke.key === 'Enter' || ke.key === ' ') {
+                    ke.preventDefault();
+                    this.dispatchDayClick(dayContext, event);
+                }
+            });
         }
         return dayElement;
     }
-    /**
-     * Main render function - property-based approach
-     */
     render() {
         const root = this.shadowRoot;
         if (!root)
             return;
-        // Ensure styles are loaded
         ensureStyles(root, { css: calendarMonthStyles, id: 'ty-calendar-month' });
-        // Apply custom CSS if provided
         this.applyCustomCSS();
-        // Apply width properties
         this.applyWidthProperties();
-        // Convert timestamp to selection info
         let selection;
         if (this._value) {
             const date = new Date(this._value);
             selection = {
                 year: date.getFullYear(),
-                month: date.getMonth() + 1, // Convert to 1-based
+                month: date.getMonth() + 1,
                 day: date.getDate()
             };
         }
-        // Generate calendar days with selection info
         const days = getCalendarMonthDays(this._displayYear, this._displayMonth, selection);
-        // Get localized weekday names
         const weekdays = getLocalizedWeekdays(this._locale, 'short');
-        // Clear and rebuild
         root.innerHTML = '';
-        // Create unified flex container
         const calendarContainer = document.createElement('div');
         calendarContainer.className = `calendar-flex-container calendar-size-${this._size}`;
-        // Create header row with weekday names
+        calendarContainer.setAttribute('role', 'grid');
+        calendarContainer.setAttribute('aria-label', new Intl.DateTimeFormat(this._locale, { month: 'long', year: 'numeric' })
+            .format(new Date(this._displayYear, this._displayMonth - 1, 1)));
         const headerRow = document.createElement('div');
         headerRow.className = 'calendar-row calendar-header-row';
+        headerRow.setAttribute('role', 'row');
         weekdays.forEach(weekday => {
             const headerCell = document.createElement('div');
             headerCell.className = 'calendar-cell calendar-header-cell';
+            headerCell.setAttribute('role', 'columnheader');
             headerCell.textContent = weekday;
             headerRow.appendChild(headerCell);
         });
         calendarContainer.appendChild(headerRow);
-        // Create day rows (6 weeks of 7 days each)
         const dayWeeks = [];
         for (let i = 0; i < 42; i += 7) {
             dayWeeks.push(days.slice(i, i + 7));
         }
-        // Bounds for disabling days (UTC-midnight, same space as DayContext.value)
         const minTs = isoToUTCTimestamp(this._min);
         const maxTs = isoToUTCTimestamp(this._max);
+        const disabledAt = (i) => {
+            const v = days[i].value;
+            return (minTs !== null && v < minTs) || (maxTs !== null && v > maxTs);
+        };
+        let defaultIndex = days.findIndex(d => d.isSelected);
+        if (defaultIndex === -1)
+            defaultIndex = days.findIndex(d => d.today);
+        if (defaultIndex === -1)
+            defaultIndex = 0;
+        if (this._focusedIndex === null ||
+            this._focusedIndex < 0 ||
+            this._focusedIndex > 41 ||
+            disabledAt(this._focusedIndex)) {
+            this._focusedIndex = defaultIndex;
+        }
+        this._cellElements = [];
+        let flatIndex = 0;
         dayWeeks.forEach(week => {
             const dayRow = document.createElement('div');
             dayRow.className = 'calendar-row calendar-day-row';
+            dayRow.setAttribute('role', 'row');
             week.forEach(dayContext => {
                 const disabled = (minTs !== null && dayContext.value < minTs) ||
                     (maxTs !== null && dayContext.value > maxTs);
-                const dayCell = this.renderDayCell(dayContext, disabled);
-                // Add unified cell classes for flex layout
+                const dayCell = this.renderDayCell(dayContext, disabled, flatIndex === this._focusedIndex);
                 dayCell.className = `${dayCell.className} calendar-cell calendar-day-cell`;
                 dayRow.appendChild(dayCell);
+                this._cellElements[flatIndex] = dayCell;
+                flatIndex++;
             });
             calendarContainer.appendChild(dayRow);
         });
+        calendarContainer.addEventListener('keydown', (event) => {
+            const ke = event;
+            const delta = ke.key === 'ArrowLeft' ? -1 :
+                ke.key === 'ArrowRight' ? 1 :
+                    ke.key === 'ArrowUp' ? -7 :
+                        ke.key === 'ArrowDown' ? 7 :
+                            0;
+            if (delta === 0)
+                return;
+            const currentIndex = this._focusedIndex ?? defaultIndex;
+            const nextIndex = currentIndex + delta;
+            if (nextIndex < 0 || nextIndex > 41 || disabledAt(nextIndex))
+                return;
+            ke.preventDefault();
+            this._cellElements[currentIndex]?.setAttribute('tabindex', '-1');
+            this._focusedIndex = nextIndex;
+            const nextCell = this._cellElements[nextIndex];
+            if (nextCell) {
+                nextCell.setAttribute('tabindex', '0');
+                nextCell.focus();
+            }
+        });
         root.appendChild(calendarContainer);
     }
 }
-// Register the custom element
 if (!customElements.get('ty-calendar-month')) {
     customElements.define('ty-calendar-month', TyCalendarMonth);
 }
-//# sourceMappingURL=calendar-month.js.map

package/lib/components/calendar-navigation.d.ts

@@ -1,36 +1,7 @@
 /**
- * TyCalendarNavigation Web Component
- * PORTED FROM: cljs/ty/components/calendar_navigation.cljs
- *
- * A pure presentation component for calendar month/year navigation.
- * Stateless - all state comes from properties, changes emitted via events.
- *
- * Features:
- * - Year/Month navigation (prev/next month, prev/next year)
- * - Localized month name display
- * - Custom event emission on navigation
- * - Property-driven API (no internal state)
- * - Inline SVG icons
- * - Shadow DOM encapsulation
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-calendar-navigation
- *   display-month="10"
- *   display-year="2025"
- *   locale="en-US">
- * </ty-calendar-navigation>
- *
- * <!-- Listen for changes -->
- * <script type="module">
- *   const nav = document.querySelector('ty-calendar-navigation');
- *   nav.addEventListener('change', (e) => {
- *     console.log('New month:', e.detail.month);
- *     console.log('New year:', e.detail.year);
- *   });
- * </script>
- * ```
+ * TyCalendarNavigation Web Component — pure presentation for calendar
+ * month/year navigation. Stateless: all state comes from properties,
+ * changes are emitted via events.
  */
 import { TyComponent } from '../base/ty-component.js';
 import type { PropertyChange } from '../utils/property-manager.js';
@@ -98,13 +69,7 @@ export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
     private _state;
     private _localeObserver?;
     constructor();
-    /**
-     * Called when component connects to DOM
-     */
     protected onConnect(): void;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
     /**
      * Called when properties change
@@ -125,9 +90,6 @@ export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
     set min(value: string);
     get max(): string;
     set max(value: string);
-    /**
-     * Emit change event with new month/year
-     */
     private emitChangeEvent;
     /**
      * Month index (year * 12 + month - 1) — flat, comparable month math.
@@ -150,14 +112,7 @@ export declare class TyCalendarNavigation extends TyComponent<NavigationState> {
      * True when navigating by deltaMonths can't move the display (bound reached)
      */
     private isNavDisabled;
-    /**
-     * Create navigation button
-     */
     private createButton;
-    /**
-     * Main render function
-     */
     protected render(): void;
 }
 export {};
-//# sourceMappingURL=calendar-navigation.d.ts.map