tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/date-picker.js

@@ -1,69 +1,14 @@
-/**
- * TyDatePicker Web Component
- * PORTED FROM: cljs/ty/components/date_picker.cljs
- *
- * A date picker component with read-only input and calendar dropdown.
- * Supports date-only and date+time modes with smart time input.
- *
- * Architecture:
- * - Read-only input stub (displays formatted date)
- * - Calendar dropdown (modal dialog with ty-calendar)
- * - Optional time input (with smart digit navigation)
- * - Form participation via ElementInternals
- * - UTC output, local display
- *
- * Features:
- * - Date selection with calendar dropdown
- * - Optional time input with smart navigation
- * - Form integration (works with FormData)
- * - UTC value output for server communication
- * - Localized display formatting (Intl API)
- * - Clearable with clear button
- * - Keyboard navigation (Escape to close)
- * - Outside click handling
- *
- * @example
- * ```html
- * <!-- Basic date picker -->
- * <ty-date-picker
- *   label="Select Date"
- *   placeholder="Choose a date">
- * </ty-date-picker>
- *
- * <!-- With time -->
- * <ty-date-picker
- *   with-time="true"
- *   label="Select Date & Time">
- * </ty-date-picker>
- *
- * <!-- Form integration -->
- * <form>
- *   <ty-date-picker name="booking-date"></ty-date-picker>
- *   <button type="submit">Submit</button>
- * </form>
- *
- * <!-- Pre-filled value (UTC) -->
- * <ty-date-picker value="2024-09-21T08:30:00.000Z"></ty-date-picker>
- * ```
- */
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
 import { datePickerStyles, datePickerCustomFlavorCss } from '../styles/date-picker.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
-import { computeAnchoredPosition } from '../utils/positioning.js';
+import { computeAnchoredPosition, placementToAnchored } from '../utils/positioning.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
-// ============================================================================
-// Constants
-// ============================================================================
 const CALENDAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>`;
 const CLEAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>`;
 const SCHEDULE_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'></circle><polyline points='12,6 12,12 16,14'></polyline></svg>`;
-// Stable per-instance id (survives across full-rebuild re-renders, unlike a
-// fresh Math.random() per render) — used to wire the stub's aria-labelledby
-// to the label element it's paired with. Same pattern as select.ts's
-// getElementHash.
 const elementIds = new WeakMap();
 let elementIdCounter = 0;
 function getElementHash(element) {
@@ -74,86 +19,43 @@ function getElementHash(element) {
     }
     return id;
 }
-// ============================================================================
-// Helper Functions - Date Parsing & Conversion
-// ============================================================================
-/**
- * Parse ANY input format into year/month/day/hour/minute components.
- * Accepts:
- * - UTC strings: '2024-09-21T08:30:00Z' or '2024-09-21T08:30:00.000Z'
- * - Datetime-local: '2024-09-21T10:30'
- * - Date only: '2024-09-21'
- * - Timestamps: milliseconds since epoch
- * - With timezone: '2024-09-21T10:30:00+02:00'
- *
- * Always extracts components in LOCAL timezone for display/editing.
- *
- * PORTED FROM: parse-value in date_picker.cljs
- */
 function parseValue(value, withTime) {
     if (!value)
         return null;
     let dateObj = null;
     if (typeof value === 'string') {
-        // Date-only format: YYYY-MM-DD
         if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
             const [yearStr, monthStr, dayStr] = value.split('-');
             const year = parseInt(yearStr, 10);
-            const month = parseInt(monthStr, 10) - 1; // 0-based for JS Date
+            const month = parseInt(monthStr, 10) - 1;
             const day = parseInt(dayStr, 10);
-            // Create at midnight local time
             dateObj = new Date(year, month, day, 0, 0, 0, 0);
         }
         else {
-            // Let JS Date handle datetime-local, UTC, with timezone
             dateObj = new Date(value);
         }
     }
     else if (typeof value === 'number') {
-        // Numeric inputs (milliseconds)
         dateObj = new Date(value);
     }
     if (!dateObj || isNaN(dateObj.getTime())) {
         return null;
     }
-    // Extract components in LOCAL timezone for display
     const components = {
         year: dateObj.getFullYear(),
-        month: dateObj.getMonth() + 1, // Convert to 1-based
+        month: dateObj.getMonth() + 1,
         day: dateObj.getDate(),
         hour: withTime ? dateObj.getHours() : 0,
         minute: withTime ? dateObj.getMinutes() : 0,
     };
     return components;
 }
-/**
- * Convert internal components to Date object.
- *
- * PORTED FROM: components->date-object in date_picker.cljs
- */
 function componentsToDateObject(components) {
     const { year, month, day, hour, minute } = components;
     if (!year || !month || !day)
         return null;
-    // Create local date
-    return new Date(year, month - 1, // Convert to 0-based
-    day, hour || 0, minute || 0, 0, // seconds
-    0 // milliseconds
-    );
+    return new Date(year, month - 1, day, hour || 0, minute || 0, 0, 0);
 }
-/**
- * Convert internal components to UTC ISO 8601 format.
- *
- * For date+time mode: Outputs full UTC timestamp with milliseconds
- * Example: '2024-09-21T08:30:00.000Z'
- *
- * For date-only mode: Outputs UTC timestamp at midnight local time
- * Example: '2024-09-20T22:00:00.000Z' (midnight Sept 21 CEST = 10pm Sept 20 UTC)
- *
- * Always returns UTC to ensure unambiguous server communication.
- *
- * PORTED FROM: components->output-value in date_picker.cljs
- */
 function componentsToOutputValue(components) {
     if (!components.year || !components.month || !components.day) {
         return null;
@@ -161,18 +63,6 @@ function componentsToOutputValue(components) {
     const dateObj = componentsToDateObject(components);
     return dateObj ? dateObj.toISOString() : null;
 }
-/**
- * Convert internal components to local datetime-local format.
- *
- * For date+time mode: Outputs local datetime without timezone
- * Example: '2024-09-21T10:30'
- *
- * For date-only mode: Outputs date only
- * Example: '2024-09-21'
- *
- * This format matches HTML5 <input type="datetime-local"> and is useful
- * for setting other inputs or displaying local time without timezone conversion.
- */
 function componentsToLocalValue(components, withTime) {
     if (!components.year || !components.month || !components.day) {
         return null;
@@ -189,11 +79,6 @@ function componentsToLocalValue(components, withTime) {
         return `${year}-${month}-${day}`;
     }
 }
-/**
- * Format components for display in input using Intl API.
- *
- * PORTED FROM: format-display-value in date_picker.cljs
- */
 function formatDisplayValue(components, formatType, locale, withTime) {
     if (!components.year || !components.month || !components.day) {
         return null;
@@ -204,21 +89,12 @@ function formatDisplayValue(components, formatType, locale, withTime) {
     const options = {
         dateStyle: formatType || 'long',
     };
-    // Add time styling if with-time is enabled
     if (withTime) {
         options.timeStyle = 'short';
     }
     const formatter = new Intl.DateTimeFormat(locale, options);
     return formatter.format(dateObj);
 }
-// ============================================================================
-// Helper Functions - Time Input
-// ============================================================================
-/**
- * Parse hour and minute from raw digits (4 chars: "HHmm")
- *
- * PORTED FROM: parse-time-components in date_picker.cljs
- */
 function parseTimeComponents(rawDigits) {
     if (!rawDigits || rawDigits.length !== 4)
         return null;
@@ -231,99 +107,60 @@ function parseTimeComponents(rawDigits) {
     }
     return { hour, minute };
 }
-/**
- * Validate if digit is valid for given position
- * Position 0: first hour digit (0-2)
- * Position 1: second hour digit (0-9, but 0-3 if first is 2)
- * Position 3: first minute digit (0-5)
- * Position 4: second minute digit (0-9)
- *
- * PORTED FROM: validate-time-digit in date_picker.cljs
- */
 function validateTimeDigit(digit, position, currentDigits) {
     switch (position) {
         case 0:
-            return digit <= 2; // First hour digit: 0-2
+            return digit <= 2;
         case 1: {
             const firstHour = parseInt(currentDigits[0], 10);
-            return firstHour === 2 ? digit <= 3 : true; // If hour starts with 2, max 23
+            return firstHour === 2 ? digit <= 3 : true;
         }
         case 3:
-            return digit <= 5; // First minute digit: 0-5
+            return digit <= 5;
         case 4:
-            return true; // Second minute digit: 0-9
+            return true;
         default:
             return false;
     }
 }
-/**
- * Format hour and minute into "HH:mm" display
- *
- * PORTED FROM: format-time-display in date_picker.cljs
- */
 function formatTimeDisplay(hour, minute) {
     const hourStr = hour.toString().padStart(2, '0');
     const minuteStr = minute.toString().padStart(2, '0');
     return `${hourStr}:${minuteStr}`;
 }
-/**
- * Find next editable position, skipping delimiter at position 2
- *
- * PORTED FROM: find-next-editable-position in date_picker.cljs
- */
 function findNextEditablePosition(currentPos) {
     switch (currentPos) {
-        case 0: return 1; // 0 -> 1 (within hour)
-        case 1: return 3; // 1 -> 3 (skip delimiter, go to minute)
-        case 3: return 4; // 3 -> 4 (within minute)
-        case 4: return 5; // 4 -> 5 (after last digit)
-        case 5: return 5; // 5 -> 5 (stay at end)
+        case 0: return 1;
+        case 1: return 3;
+        case 3: return 4;
+        case 4: return 5;
+        case 5: return 5;
         default: return currentPos;
     }
 }
-/**
- * Find previous editable position, skipping delimiter at position 2
- *
- * PORTED FROM: find-prev-editable-position in date_picker.cljs
- */
 function findPrevEditablePosition(currentPos) {
     switch (currentPos) {
-        case 5: return 4; // 5 -> 4 (from after last digit)
-        case 4: return 3; // 4 -> 3 (within minute)
-        case 3: return 1; // 3 -> 1 (skip delimiter, go to hour)
-        case 1: return 0; // 1 -> 0 (within hour)
-        case 0: return 0; // 0 -> 0 (stay at start)
+        case 5: return 4;
+        case 4: return 3;
+        case 3: return 1;
+        case 1: return 0;
+        case 0: return 0;
         default: return currentPos;
     }
 }
-/**
- * Convert internal position (0,1,3,4) to raw digits index (0,1,2,3)
- *
- * PORTED FROM: position->raw-digit-index in date_picker.cljs
- */
 function positionToRawDigitIndex(internalPos) {
     switch (internalPos) {
-        case 0: return 0; // Position 0 → raw digit 0 (first hour)
-        case 1: return 1; // Position 1 → raw digit 1 (second hour)
-        case 3: return 2; // Position 3 → raw digit 2 (first minute)
-        case 4: return 3; // Position 4 → raw digit 3 (second minute)
+        case 0: return 0;
+        case 1: return 1;
+        case 3: return 2;
+        case 4: return 3;
         default: return 0;
     }
 }
-// ============================================================================
-// TimeInput Helper Class
-// ============================================================================
-/**
- * TimeInput manages the state and behavior of the time input element.
- * Handles smart cursor navigation, digit replacement, and validation.
- *
- * PORTED FROM: Time input state management functions in date_picker.cljs
- */
 class TimeInput {
     constructor(element, datePickerElement, hour = 0, minute = 0) {
         this.element = element;
         this.datePickerElement = datePickerElement;
-        // Initialize state
         const display = formatTimeDisplay(hour, minute);
         const rawDigits = hour.toString().padStart(2, '0') + minute.toString().padStart(2, '0');
         this.state = {
@@ -333,23 +170,15 @@ class TimeInput {
             displayValue: display,
             rawDigits,
         };
-        // Set initial value
         this.element.value = display;
-        // Bind event handlers
         this.setupEventListeners();
     }
-    /**
-     * Setup all event listeners for the time input
-     */
     setupEventListeners() {
         this.element.addEventListener('keydown', (e) => this.handleKeyDown(e));
         this.element.addEventListener('input', (e) => this.handleInput(e));
         this.element.addEventListener('click', () => this.handleClick());
         this.element.addEventListener('focus', () => this.handleFocus());
     }
-    /**
-     * Handle keydown events
-     */
     handleKeyDown(event) {
         const key = event.key;
         switch (key) {
@@ -374,89 +203,52 @@ class TimeInput {
                 this.updateState({ caretPosition: 5 });
                 break;
             case 'Tab':
-                // Allow default tab behavior
                 break;
             default:
-                // Handle digit input
                 if (/^\d$/.test(key)) {
                     this.handleDigitInput(event, parseInt(key, 10));
                 }
                 break;
         }
     }
-    /**
-     * Handle input events (prevent default browser input)
-     */
     handleInput(event) {
         event.preventDefault();
     }
-    /**
-     * Handle click events - position cursor at first digit
-     */
     handleClick() {
         this.updateState({ caretPosition: 0 });
     }
-    /**
-     * Handle focus events - position cursor at first digit
-     */
     handleFocus() {
         this.updateState({ caretPosition: 0 });
     }
-    /**
-     * Handle arrow right - move to next editable position
-     *
-     * PORTED FROM: handle-time-arrow-right! in date_picker.cljs
-     */
     handleArrowRight(event) {
         event.preventDefault();
         const nextPos = findNextEditablePosition(this.state.caretPosition);
         this.updateState({ caretPosition: nextPos });
     }
-    /**
-     * Handle arrow left - move to previous editable position
-     *
-     * PORTED FROM: handle-time-arrow-left! in date_picker.cljs
-     */
     handleArrowLeft(event) {
         event.preventDefault();
         const prevPos = findPrevEditablePosition(this.state.caretPosition);
         this.updateState({ caretPosition: prevPos });
     }
-    /**
-     * Handle digit input - replace digit at cursor position
-     *
-     * PORTED FROM: handle-time-digit-input! in date_picker.cljs
-     */
     handleDigitInput(event, digit) {
         event.preventDefault();
         const currentPos = this.state.caretPosition;
-        // Only process if at editable position and digit is valid
         if (![0, 1, 3, 4].includes(currentPos))
             return;
         if (!validateTimeDigit(digit, currentPos, this.state.rawDigits))
             return;
-        // Replace digit at current position
         const newState = this.replaceDigitAtPosition(currentPos, digit);
         if (!newState)
             return;
-        // Move to next position
         const nextPos = findNextEditablePosition(currentPos);
         this.updateState({ ...newState, caretPosition: nextPos });
-        // Notify date picker of time change
         this.notifyTimeChange();
     }
-    /**
-     * Handle backspace - zero digit and move back
-     *
-     * PORTED FROM: handle-time-backspace! in date_picker.cljs
-     */
     handleBackspace(event) {
         event.preventDefault();
         const currentPos = this.state.caretPosition;
-        // Can't go back from position 0
         if (currentPos === 0)
             return;
-        // Find target position to zero
         const targetPos = currentPos === 1 ? 0 :
             currentPos === 3 ? 1 :
                 currentPos === 4 ? 3 :
@@ -467,15 +259,9 @@ class TimeInput {
         this.updateState({ ...newState, caretPosition: targetPos });
         this.notifyTimeChange();
     }
-    /**
-     * Handle delete - zero digit at current position
-     *
-     * PORTED FROM: handle-time-delete! in date_picker.cljs
-     */
     handleDelete(event) {
         event.preventDefault();
         const currentPos = this.state.caretPosition;
-        // Only at editable positions
         if (![0, 1, 3, 4].includes(currentPos))
             return;
         const newState = this.zeroDigitAtPosition(currentPos);
@@ -484,11 +270,6 @@ class TimeInput {
         this.updateState({ ...newState, caretPosition: currentPos });
         this.notifyTimeChange();
     }
-    /**
-     * Replace digit at specific position
-     *
-     * PORTED FROM: replace-digit-at-position in date_picker.cljs
-     */
     replaceDigitAtPosition(position, newDigit) {
         const rawIndex = positionToRawDigitIndex(position);
         const digitsArray = this.state.rawDigits.split('');
@@ -504,24 +285,12 @@ class TimeInput {
             displayValue: formatTimeDisplay(parsed.hour, parsed.minute),
         };
     }
-    /**
-     * Zero digit at specific position
-     *
-     * PORTED FROM: zero-digit-at-position in date_picker.cljs
-     */
     zeroDigitAtPosition(position) {
         return this.replaceDigitAtPosition(position, 0);
     }
-    /**
-     * Update internal state and refresh display
-     *
-     * PORTED FROM: update-time-input-state! in date_picker.cljs
-     */
     updateState(updates) {
         this.state = { ...this.state, ...updates };
-        // Update display value
         this.element.value = this.state.displayValue;
-        // Set cursor position, mapping internal positions to DOM positions
         const caretPos = this.state.caretPosition;
         const actualPos = caretPos === 0 ? 0 :
             caretPos === 1 ? 1 :
@@ -531,24 +300,15 @@ class TimeInput {
                             caretPos === 5 ? 5 : caretPos;
         this.element.setSelectionRange(actualPos, actualPos);
     }
-    /**
-     * Notify date picker of time change
-     */
     notifyTimeChange() {
         this.datePickerElement.handleTimeInputChange(this.state.hour, this.state.minute);
     }
-    /**
-     * Get current time values
-     */
     getTime() {
         return {
             hour: this.state.hour,
             minute: this.state.minute,
         };
     }
-    /**
-     * Update time from external source
-     */
     setTime(hour, minute) {
         const display = formatTimeDisplay(hour, minute);
         const rawDigits = hour.toString().padStart(2, '0') + minute.toString().padStart(2, '0');
@@ -562,76 +322,43 @@ class TimeInput {
         this.element.value = display;
     }
 }
-// ============================================================================
-// TyDatePicker Custom Element
-// ============================================================================
 export class TyDatePicker extends TyComponent {
-    // observedAttributes is auto-generated by TyComponent from properties config
     constructor() {
-        super(); // TyComponent handles attachShadow and attachInternals
-        // ============================================================================
-        // INTERNAL STATE
-        // ============================================================================
-        // Internal state
+        super();
         this._state = {
             withTime: false,
             open: false,
         };
-        // Reopen guard — prevents click event from reopening after pointerdown close
         this._closeTimestamp = 0;
         this._customFlavorSheet = null;
-        // Initialize styles in shadow root
         const shadow = this.shadowRoot;
         ensureStyles(shadow, { css: datePickerStyles, id: 'ty-date-picker' });
     }
-    // ==========================================================================
-    // Lifecycle Hooks (TyComponent)
-    // ==========================================================================
-    /**
-     * Called when component connects to DOM
-     * TyComponent handles property capture automatically
-     */
     onConnect() {
-        // Initialize component state
         this.initializeState();
-        // Initial render
         this.render();
-        // Setup locale observer to watch for ancestor lang changes
         this._localeObserver = observeLocaleChanges(this, () => {
             this.render();
         });
         this._syncCustomFlavor();
     }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     _syncCustomFlavor() {
-        // 'default' is this component's neutral: map it to a built-in so no
-        // custom sheet is generated for it.
         const flavor = this.flavor === 'default' ? 'neutral' : this.flavor;
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, flavor, ({ base }) => datePickerCustomFlavorCss(base));
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
-        // Cleanup locale observer
         if (this._localeObserver) {
             this._localeObserver();
             this._localeObserver = undefined;
         }
-        // Cleanup event listeners and state
         this.cleanup();
     }
-    /**
-     * Called when properties change
-     * Handle state updates BEFORE render
-     */
     onPropertiesChanged(changes) {
         for (const { name, newValue } of changes) {
             switch (name) {
                 case 'flavor':
                     this._syncCustomFlavor();
                     break;
-                // Simple visual properties - just trigger re-render (handled by TyComponent)
                 case 'size':
                 case 'label':
                 case 'placeholder':
@@ -640,30 +367,21 @@ export class TyDatePicker extends TyComponent {
                 case 'clearable':
                 case 'format':
                 case 'locale':
-                    // These properties just affect rendering, no internal state to update
-                    // TyComponent will call render() automatically for visual properties
                     break;
-                // Complex properties
                 case 'value': {
-                    // Parse the new value using current withTime setting
                     const newComponents = parseValue(newValue, this._state.withTime);
-                    // If newComponents is null, CLEAR the state completely
                     if (newComponents === null) {
-                        // Check if we actually have a date to clear
                         const hasDate = this._state.year !== undefined ||
                             this._state.month !== undefined ||
                             this._state.day !== undefined;
                         if (hasDate) {
-                            // Clear all date components, keeping only withTime and open flags
                             this._state = {
                                 withTime: this._state.withTime,
                                 open: this._state.open,
-                                // year, month, day, hour, minute are now undefined
                             };
                         }
                         break;
                     }
-                    // Check if components actually changed
                     const currentComponents = {
                         year: this._state.year,
                         month: this._state.month,
@@ -677,7 +395,6 @@ export class TyDatePicker extends TyComponent {
                         newComponents?.hour !== currentComponents.hour ||
                         newComponents?.minute !== currentComponents.minute;
                     if (changed) {
-                        // Update state with new date components
                         this._state = {
                             ...this._state,
                             ...newComponents,
@@ -686,13 +403,10 @@ export class TyDatePicker extends TyComponent {
                     break;
                 }
                 case 'with-time': {
-                    // Update internal withTime flag
                     const newWithTime = newValue;
                     const oldWithTime = this._state.withTime;
                     if (newWithTime !== oldWithTime) {
                         this._state.withTime = newWithTime;
-                        // If we have an existing date, re-sync form value
-                        // (format changes based on withTime flag)
                         const hasDate = this._state.year !== undefined &&
                             this._state.month !== undefined &&
                             this._state.day !== undefined;
@@ -705,20 +419,9 @@ export class TyDatePicker extends TyComponent {
             }
         }
     }
-    // attributeChangedCallback removed - TyComponent handles all attribute changes via onPropertiesChanged
-    /**
-     * Get form value - returns UTC string from current state
-     * TyComponent calls this automatically when value property changes
-     */
     getFormValue() {
         return componentsToOutputValue(this.getComponents());
     }
-    // ==========================================================================
-    // Internal Helpers
-    // ==========================================================================
-    /**
-     * Extract current date components from internal state
-     */
     getComponents() {
         return {
             year: this._state.year,
@@ -728,34 +431,19 @@ export class TyDatePicker extends TyComponent {
             minute: this._state.minute,
         };
     }
-    /**
-     * Whether internal state has a complete date
-     */
     hasDate() {
         return !!(this._state.year && this._state.month && this._state.day);
     }
-    /**
-     * Format current components for display using Intl API
-     */
     getFormattedValue(components) {
         const c = components || this.getComponents();
         if (!c.year || !c.month || !c.day)
             return null;
         return formatDisplayValue(c, this.getProperty('format') || 'long', getEffectiveLocale(this, this.getProperty('locale')), this._state.withTime);
     }
-    // ==========================================================================
-    // State Management
-    // ==========================================================================
-    /**
-     * Initialize component state from attributes
-     *
-     * PORTED FROM: init-component-state! in date_picker.cljs
-     */
     initializeState() {
         const valueAttr = this.getProperty('value');
         const withTime = this.getProperty('with-time');
         const components = parseValue(valueAttr, withTime);
-        // If components is null, initialize with empty state
         if (components === null) {
             this._state = {
                 withTime,
@@ -769,34 +457,19 @@ export class TyDatePicker extends TyComponent {
                 open: false,
             };
         }
-        // Convert to UTC and sync to form
         this.syncFormValue();
     }
-    /**
-     * Update internal state
-     *
-     * PORTED FROM: update-component-state! in date_picker.cljs
-     */
     updateState(updates, forceSync = false) {
         this._state = { ...this._state, ...updates };
-        // STAGING: Only sync attributes if dialog is closed OR force-sync is true
-        // This prevents re-renders during time input editing
         const shouldSync = forceSync || !this._state.open || !this._state.withTime;
         if (shouldSync) {
             this.syncFormValue();
         }
     }
-    /**
-     * Sync form value with current state
-     * Compares before setting to prevent circular triggers
-     */
     syncFormValue() {
         const utcValue = this.getFormValue();
         const currentValue = this.getProperty('value');
-        // Only update property if value actually changed (prevents circular triggers)
         if (utcValue !== currentValue) {
-            // Use property setter to maintain TyComponent lifecycle
-            // This will automatically handle attribute sync and form value update
             if (utcValue) {
                 this.setProperty('value', utcValue);
             }
@@ -804,17 +477,7 @@ export class TyDatePicker extends TyComponent {
                 this.setProperty('value', null);
             }
         }
-        // Form value sync handled automatically by TyComponent (formValue: true)
-    }
-    // handleValueChange removed - logic moved to onPropertiesChanged hook
-    // ==========================================================================
-    // Time Input Handling
-    // ==========================================================================
-    /**
-     * Handle time input changes from TimeInput class
-     *
-     * PORTED FROM: handle-time-change! in date_picker.cljs
-     */
+    }
     handleTimeInputChange(hour, minute) {
         if (!this.hasDate())
             return;
@@ -822,11 +485,6 @@ export class TyDatePicker extends TyComponent {
         this.updateState(components, true);
         this.emitChangeEvent(components, 'time-change');
     }
-    /**
-     * Emit change event
-     *
-     * PORTED FROM: emit-change-event! in date_picker.cljs
-     */
     emitChangeEvent(components, source) {
         const utcValue = components ? componentsToOutputValue(components) : null;
         const localValue = components ? componentsToLocalValue(components, this._state.withTime) : null;
@@ -846,12 +504,10 @@ export class TyDatePicker extends TyComponent {
         });
         this.dispatchEvent(event);
     }
-    // ==========================================================================
-    // Public API (Properties) - Simple Accessors
-    // ==========================================================================
-    // String properties
     get size() { return this.getProperty('size'); }
     set size(v) { this.setProperty('size', v); }
+    get placement() { return this.getProperty('placement'); }
+    set placement(v) { this.setProperty('placement', v); }
     get flavor() { return this.getProperty('flavor'); }
     set flavor(v) { this.setProperty('flavor', v); }
     get label() { return this.getProperty('label'); }
@@ -864,7 +520,6 @@ export class TyDatePicker extends TyComponent {
     set format(v) { this.setProperty('format', v); }
     get locale() { return this.getProperty('locale'); }
     set locale(v) { this.setProperty('locale', v); }
-    // Boolean properties
     get required() { return this.getProperty('required'); }
     set required(v) { this.setProperty('required', v); }
     get disabled() { return this.getProperty('disabled'); }
@@ -875,48 +530,23 @@ export class TyDatePicker extends TyComponent {
     set min(v) { this.setProperty('min', v ?? ''); }
     get max() { return this.getProperty('max'); }
     set max(v) { this.setProperty('max', v ?? ''); }
-    // With-time property
     get withTime() { return this.getProperty('with-time'); }
     set withTime(v) { this.setProperty('with-time', v); }
-    // Value property - Keep custom getter/setter for now (complex UTC parsing logic)
-    /**
-     * Get current value (UTC ISO string)
-     */
     get value() {
         return this.getProperty('value') || null;
     }
-    /**
-     * Set value (UTC ISO string, Date object, or null)
-     *
-     * When set to null/undefined/empty string, the attribute is removed.
-     * When set to a valid date, the attribute is set to ISO UTC string.
-     */
     set value(val) {
         if (val === null || val === undefined || val === '') {
-            this.setProperty('value', null); // TyComponent will remove attribute
+            this.setProperty('value', null);
         }
         else {
             const strValue = val instanceof Date ? val.toISOString() : val;
             this.setProperty('value', strValue);
         }
     }
-    /**
-     * Clear the date value programmatically WITH a change event (source:
-     * 'clear'). Works regardless of the `clearable` attribute — lets any
-     * external trigger (e.g. a button elsewhere in the page) clear the value
-     * without needing the built-in clear button. Mirrors ty-select's clear().
-     */
     clear() {
         this.clearValue();
     }
-    // ==========================================================================
-    // Rendering & DOM Management
-    // ==========================================================================
-    /**
-     * Build CSS classes for the stub element
-     *
-     * PORTED FROM: build-stub-classes in date_picker.cljs
-     */
     buildStubClasses() {
         const classes = ['date-picker-stub'];
         const size = this.getProperty('size') || 'md';
@@ -929,11 +559,6 @@ export class TyDatePicker extends TyComponent {
             classes.push('open');
         return classes.join(' ');
     }
-    /**
-     * Render the date picker stub (input display)
-     *
-     * PORTED FROM: render-date-picker-stub in date_picker.cljs
-     */
     renderStub() {
         const stub = document.createElement('div');
         stub.className = this.buildStubClasses();
@@ -941,11 +566,6 @@ export class TyDatePicker extends TyComponent {
         if (isDisabled) {
             stub.setAttribute('disabled', 'true');
         }
-        // Not text-editable (click/Enter/Space just opens the calendar dialog),
-        // so role="button" — not role="combobox", which implies typing. The
-        // popup is a real <dialog> opened via showModal() (see openDropdown),
-        // so it already gets role="dialog" + focus-trap from the browser for
-        // free; only the trigger itself needs wiring.
         stub.setAttribute('role', 'button');
         stub.setAttribute('aria-haspopup', 'dialog');
         stub.setAttribute('aria-expanded', String(this._state.open));
@@ -955,9 +575,6 @@ export class TyDatePicker extends TyComponent {
         if (this.getProperty('label')) {
             stub.setAttribute('aria-labelledby', `date-picker-label-${getElementHash(this)}`);
         }
-        // Same gap as ty-select had: a plain div's Enter/Space don't turn into
-        // click events on their own, so without this a keyboard-only user could
-        // Tab to the field but never open it.
         stub.addEventListener('keydown', (e) => {
             const ke = e;
             if (this._state.open)
@@ -967,10 +584,8 @@ export class TyDatePicker extends TyComponent {
                 this.handleStubClick(e);
             }
         });
-        // Start slot — leading icon (search, calendar variant, etc.)
         const startSlot = document.createElement('slot');
         startSlot.name = 'start';
-        // Display text
         const displayText = document.createElement('span');
         displayText.className = 'stub-text';
         const formattedValue = this.getFormattedValue();
@@ -979,10 +594,8 @@ export class TyDatePicker extends TyComponent {
         if (!formattedValue) {
             displayText.classList.add('placeholder');
         }
-        // Icons container
         const iconContainer = document.createElement('div');
         iconContainer.className = 'stub-icons';
-        // Clear button
         const clearable = this.getProperty('clearable');
         if (clearable && formattedValue && !isDisabled) {
             const clearButton = document.createElement('button');
@@ -992,23 +605,16 @@ export class TyDatePicker extends TyComponent {
             clearButton.addEventListener('click', (e) => this.handleClearClick(e));
             iconContainer.appendChild(clearButton);
         }
-        // Calendar icon
         const calendarIcon = document.createElement('span');
         calendarIcon.className = 'stub-arrow';
         calendarIcon.innerHTML = CALENDAR_ICON_SVG;
         iconContainer.appendChild(calendarIcon);
-        // Stub click handler
         stub.addEventListener('click', (e) => this.handleStubClick(e));
         stub.appendChild(startSlot);
         stub.appendChild(displayText);
         stub.appendChild(iconContainer);
         return stub;
     }
-    /**
-     * Create time input element
-     *
-     * PORTED FROM: create-time-input in date_picker.cljs
-     */
     createTimeInputElement() {
         const input = document.createElement('input');
         input.type = 'text';
@@ -1018,9 +624,6 @@ export class TyDatePicker extends TyComponent {
         input.maxLength = 5;
         return input;
     }
-    /**
-     * Render time input section
-     */
     renderTimeSection() {
         const timeSection = document.createElement('div');
         timeSection.className = 'time-section';
@@ -1028,7 +631,6 @@ export class TyDatePicker extends TyComponent {
         timeLabel.className = 'time-label';
         timeLabel.textContent = 'Time:';
         const timeInputElement = this.createTimeInputElement();
-        // Create TimeInput instance
         const hour = this._state.hour || 0;
         const minute = this._state.minute || 0;
         this._timeInput = new TimeInput(timeInputElement, this, hour, minute);
@@ -1040,19 +642,12 @@ export class TyDatePicker extends TyComponent {
         timeSection.appendChild(timeIcon);
         return timeSection;
     }
-    /**
-     * Render calendar dropdown with dialog
-     *
-     * PORTED FROM: render-calendar-dropdown in date_picker.cljs
-     */
     renderCalendarDropdown() {
         const dialog = document.createElement('dialog');
         dialog.className = 'calendar-dialog';
         const contentWrapper = document.createElement('div');
         contentWrapper.className = 'calendar-content';
-        // Create ty-calendar
         const calendar = document.createElement('ty-calendar');
-        // Set current date if available
         if (this._state.year && this._state.month && this._state.day) {
             calendar.setAttribute('year', this._state.year.toString());
             calendar.setAttribute('month', this._state.month.toString());
@@ -1062,38 +657,26 @@ export class TyDatePicker extends TyComponent {
         if (locale) {
             calendar.setAttribute('locale', locale);
         }
-        // Pass through date bounds
         const min = this.getProperty('min');
         const max = this.getProperty('max');
         if (min)
             calendar.setAttribute('min', min);
         if (max)
             calendar.setAttribute('max', max);
-        // Match the popup calendar to the stub's flavor. 'default' is the
-        // stub's own unstyled state, not a real flavor — leave the calendar on
-        // its own default rather than forwarding the literal string.
         const flavor = this.getProperty('flavor');
         if (flavor && flavor !== 'default')
             calendar.setAttribute('flavor', flavor);
-        // Add calendar change handler
         calendar.addEventListener('change', (e) => this.handleCalendarChange(e));
         contentWrapper.appendChild(calendar);
-        // Add time section if with-time enabled
         if (this._state.withTime) {
             contentWrapper.appendChild(this.renderTimeSection());
         }
         dialog.appendChild(contentWrapper);
-        // Dialog close handler
         dialog.addEventListener('close', () => {
             this.updateState({ open: false });
         });
         return dialog;
     }
-    /**
-     * Render native date input for mobile touch devices.
-     * Uses <input type="date"> or <input type="datetime-local"> when with-time.
-     * Reuses .date-picker-stub styling and existing event/state infrastructure.
-     */
     renderNativeInput() {
         const wrapper = document.createElement('div');
         wrapper.className = 'dropdown-wrapper';
@@ -1103,7 +686,6 @@ export class TyDatePicker extends TyComponent {
         if (isDisabled) {
             stub.setAttribute('disabled', 'true');
         }
-        // Native input (hidden, activated via picker indicator)
         const input = document.createElement('input');
         input.className = 'native-date-input';
         input.type = this._state.withTime ? 'datetime-local' : 'date';
@@ -1111,25 +693,21 @@ export class TyDatePicker extends TyComponent {
             input.disabled = true;
         if (this.getProperty('required'))
             input.required = true;
-        // Native min/max (datetime-local wants a time suffix)
         const minBound = this.getProperty('min');
         const maxBound = this.getProperty('max');
         if (minBound)
             input.min = this._state.withTime ? `${minBound}T00:00` : minBound;
         if (maxBound)
             input.max = this._state.withTime ? `${maxBound}T23:59` : maxBound;
-        // Pre-fill value
         const localValue = componentsToLocalValue(this.getComponents(), this._state.withTime);
         if (localValue) {
             input.value = localValue;
         }
-        // Placeholder span (native date inputs ignore placeholder attr)
         const placeholder = this.getProperty('placeholder') || 'Select date...';
         const formattedValue = this.getFormattedValue();
         const placeholderEl = document.createElement('span');
         placeholderEl.className = 'stub-text' + (formattedValue ? '' : ' placeholder');
         placeholderEl.textContent = formattedValue || placeholder;
-        // Change listener
         input.addEventListener('change', () => {
             if (!input.value) {
                 this.clearValue();
@@ -1141,13 +719,11 @@ export class TyDatePicker extends TyComponent {
                 this.emitChangeEvent(parsed, 'selection');
             }
         });
-        // Start slot — leading icon
         const startSlot = document.createElement('slot');
         startSlot.name = 'start';
         stub.appendChild(startSlot);
         stub.appendChild(input);
         stub.appendChild(placeholderEl);
-        // Icons container (clear + calendar icon)
         const iconContainer = document.createElement('div');
         iconContainer.className = 'stub-icons';
         const clearable = this.getProperty('clearable');
@@ -1167,15 +743,9 @@ export class TyDatePicker extends TyComponent {
         wrapper.appendChild(stub);
         return wrapper;
     }
-    /**
-     * Calculate calendar position
-     *
-     * PORTED FROM: calculate-calendar-position! in date_picker.cljs
-     */
     calculateCalendarPosition() {
         if (!this.shadowRoot)
             return;
-        // Mobile uses native input, no positioning needed
         if (isMobileTouch())
             return;
         const stub = this.shadowRoot.querySelector('.date-picker-stub');
@@ -1183,26 +753,26 @@ export class TyDatePicker extends TyComponent {
         if (!stub || !dialog)
             return;
         const stubRect = stub.getBoundingClientRect();
-        // Measure when shown; the estimate only covers the pre-layout call
         const dialogRect = dialog.getBoundingClientRect();
         const estimatedHeight = dialogRect.height || 400;
         const popupWidth = dialogRect.width || 320;
         const wrapPadding = 8;
+        const anchored = placementToAnchored(this.getProperty('placement'));
         const pos = computeAnchoredPosition({
             anchorRect: stubRect,
             popupWidth,
             popupHeight: estimatedHeight,
             gap: 0,
+            align: anchored.align,
+            side: anchored.side,
         });
         const positionBelow = pos.below;
         const x = pos.x - wrapPadding;
         const y = positionBelow ? pos.topY : pos.bottomY;
-        // Set CSS variables for positioning
         this.style.setProperty('--calendar-x', `${x}px`);
         this.style.setProperty('--calendar-y', `${y}px`);
         this.style.setProperty('--calendar-offset-x', '0px');
         this.style.setProperty('--calendar-offset-y', '0px');
-        // Set direction classes
         if (positionBelow) {
             dialog.classList.add('position-below');
             dialog.classList.remove('position-above');
@@ -1212,11 +782,6 @@ export class TyDatePicker extends TyComponent {
             dialog.classList.remove('position-below');
         }
     }
-    /**
-     * Render container structure
-     *
-     * PORTED FROM: render-container-structure in date_picker.cljs
-     */
     renderContainer() {
         const container = document.createElement('div');
         container.className = 'dropdown-container';
@@ -1230,40 +795,29 @@ export class TyDatePicker extends TyComponent {
         }
         return container;
     }
-    /**
-     * Main render method
-     *
-     * PORTED FROM: render! in date_picker.cljs
-     */
     render() {
         if (!this.shadowRoot)
             return;
         ensureStyles(this.shadowRoot, { css: datePickerStyles, id: 'ty-date-picker' });
-        // Mobile: native input, no dialog/event listeners/scroll lock
         if (isMobileTouch()) {
             const existingNativeInput = this.shadowRoot.querySelector('.native-date-input');
             if (existingNativeInput) {
-                // PARTIAL UPDATE: don't destroy DOM while native picker may be open
                 this.updateDisplay();
                 return;
             }
-            // FIRST RENDER: build from scratch
             this.shadowRoot.innerHTML = '';
             const container = this.renderContainer();
             container.appendChild(this.renderNativeInput());
             this.shadowRoot.appendChild(container);
             return;
         }
-        // Check if dialog is currently open
         const existingDialog = this.shadowRoot.querySelector('.calendar-dialog');
         const isDialogOpen = existingDialog && existingDialog.open;
         if (isDialogOpen && this._state.open) {
-            // PARTIAL UPDATE: Dialog is open - just update display
             this.updateDisplay();
             this.calculateCalendarPosition();
             return;
         }
-        // FULL REBUILD: Dialog is closed or doesn't exist
         this.shadowRoot.innerHTML = '';
         const container = this.renderContainer();
         const wrapper = document.createElement('div');
@@ -1272,14 +826,8 @@ export class TyDatePicker extends TyComponent {
         wrapper.appendChild(this.renderCalendarDropdown());
         container.appendChild(wrapper);
         this.shadowRoot.appendChild(container);
-        // Setup document-level event listeners
         this.setupEventListeners();
     }
-    /**
-     * Update display without destroying DOM (for open dialog)
-     *
-     * PORTED FROM: update-display! in date_picker.cljs
-     */
     updateDisplay() {
         if (!this.shadowRoot)
             return;
@@ -1288,18 +836,15 @@ export class TyDatePicker extends TyComponent {
         const hasValue = this.hasDate();
         const clearable = this.getProperty('clearable');
         const isDisabled = this.getProperty('disabled');
-        // Update stub text (shared between mobile and desktop)
         const stubText = this.shadowRoot.querySelector('.stub-text');
         if (stubText) {
             stubText.textContent = formattedValue || placeholder;
             stubText.classList.toggle('placeholder', !formattedValue);
         }
-        // Update clear button visibility
         const clearButton = this.shadowRoot.querySelector('.stub-clear');
         if (clearButton) {
             clearButton.style.display = (clearable && hasValue && !isDisabled) ? '' : 'none';
         }
-        // Mobile: also sync native input value
         if (isMobileTouch()) {
             const nativeInput = this.shadowRoot.querySelector('.native-date-input');
             if (nativeInput) {
@@ -1308,17 +853,12 @@ export class TyDatePicker extends TyComponent {
             }
             return;
         }
-        // Desktop: update calendar and time input
         const calendar = this.shadowRoot.querySelector('ty-calendar');
         if (calendar && hasValue) {
             calendar.setAttribute('year', this._state.year.toString());
             calendar.setAttribute('month', this._state.month.toString());
             calendar.setAttribute('day', this._state.day.toString());
         }
-        // Keep an already-open popup's flavor in sync. render() only rebuilds
-        // (and re-forwards flavor) while the dialog is CLOSED — while open it
-        // takes this partial-update path instead, so without this the calendar
-        // would stay stuck on whatever flavor was active when it was opened.
         if (calendar) {
             const flavor = this.getProperty('flavor');
             if (flavor && flavor !== 'default')
@@ -1330,55 +870,35 @@ export class TyDatePicker extends TyComponent {
             this._timeInput.setTime(this._state.hour, this._state.minute);
         }
     }
-    /**
-     * Setup document-level event listeners
-     */
     setupEventListeners() {
-        // Remove old listeners if they exist
         if (this._clickListener) {
             document.removeEventListener('click', this._clickListener);
         }
         if (this._keydownListener) {
             document.removeEventListener('keydown', this._keydownListener);
         }
-        // Create new listeners
         this._clickListener = (e) => this.handleOutsideClick(e);
         this._keydownListener = (e) => this.handleEscapeKey(e);
-        // Add document listeners
         document.addEventListener('click', this._clickListener);
         document.addEventListener('keydown', this._keydownListener);
-        // Add dialog click listener
         const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
         if (dialog) {
             this._dialogClickListener = (e) => this.handleDialogClick(e);
             dialog.addEventListener('click', this._dialogClickListener);
         }
     }
-    // ==========================================================================
-    // Event Handlers
-    // ==========================================================================
     handleStubClick(event) {
         event.preventDefault();
-        // Heal state/DOM desync: a host re-render can replace the dialog element
-        // while `open` is still true, stranding the picker (openDropdown
-        // early-returns on _state.open). Reality wins: closed dialog → closed state.
         const dialog = this.shadowRoot?.querySelector('.calendar-dialog');
         if (this._state.open && (!dialog || !dialog.open)) {
             this.updateState({ open: false }, true);
             unlockScroll(`date-picker-${this.id || this.toString()}`);
         }
         const disabled = this.getProperty('disabled');
-        // FIXME: Timestamp guard is a workaround. Calendar day cells use pointerdown,
-        // which closes the dialog before the click event fires — the click then hits the
-        // stub and reopens. Proper fix: switch calendar-month day cells from pointerdown
-        // to click so the event is consumed before the dialog closes.
         if (!disabled && Date.now() - this._closeTimestamp > 300) {
             this.openDropdown();
         }
     }
-    /**
-     * Clear the date value, sync state, emit event, and re-render.
-     */
     clearValue() {
         this.updateState({
             year: undefined,
@@ -1396,11 +916,6 @@ export class TyDatePicker extends TyComponent {
         event.stopPropagation();
         this.clearValue();
     }
-    /**
-     * Handle calendar date selection
-     *
-     * PORTED FROM: handle-calendar-change! in date_picker.cljs
-     */
     handleCalendarChange(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -1409,7 +924,6 @@ export class TyDatePicker extends TyComponent {
         const dayContext = detail.dayContext;
         if (!dayContext)
             return;
-        // Update state with new date
         const newComponents = {
             year: dayContext.year,
             month: dayContext.month,
@@ -1417,15 +931,12 @@ export class TyDatePicker extends TyComponent {
             hour: this._state.hour,
             minute: this._state.minute,
         };
-        // Force sync when calendar date changes
         this.updateState(newComponents, true);
         this.emitChangeEvent(newComponents, 'selection');
-        // Close calendar if time is not required
         if (!this._state.withTime) {
             this.closeDropdown();
         }
         else {
-            // Auto-focus time input after date selection
             requestAnimationFrame(() => {
                 if (!this.shadowRoot)
                     return;
@@ -1436,43 +947,26 @@ export class TyDatePicker extends TyComponent {
             });
         }
     }
-    /**
-     * Handle dialog backdrop clicks
-     *
-     * PORTED FROM: handle-dialog-click! in date_picker.cljs
-     */
     handleDialogClick(event) {
         if (!this.shadowRoot)
             return;
         const dialog = this.shadowRoot.querySelector('.calendar-dialog');
         const content = this.shadowRoot.querySelector('.calendar-content');
-        // Close if clicking on dialog backdrop (not calendar content)
         if (event.target === dialog && this._state.open && content && !content.contains(event.target)) {
             event.preventDefault();
             event.stopPropagation();
             this.closeDropdown();
         }
     }
-    /**
-     * Handle clicks outside the date picker
-     *
-     * PORTED FROM: handle-outside-click! in date_picker.cljs
-     */
     handleOutsideClick(event) {
         if (!this.shadowRoot)
             return;
         const target = event.target;
         const dialog = this.shadowRoot.querySelector('.calendar-dialog');
-        // Check if click is truly outside everything
         if (this._state.open && dialog && !this.contains(target) && !dialog.contains(target)) {
             this.closeDropdown();
         }
     }
-    /**
-     * Handle Escape key press
-     *
-     * PORTED FROM: handle-escape-key! in date_picker.cljs
-     */
     handleEscapeKey(event) {
         const keyboardEvent = event;
         if (keyboardEvent.key === 'Escape' && this._state.open) {
@@ -1480,22 +974,13 @@ export class TyDatePicker extends TyComponent {
             this.closeDropdown();
         }
     }
-    /**
-     * Open calendar dropdown
-     *
-     * PORTED FROM: open-dropdown! in date_picker.cljs
-     */
     openDropdown() {
         if (this._state.open)
             return;
         if (isMobileTouch())
             return;
         this.updateState({ open: true });
-        // Dispatch open event
-        this.dispatchEvent(new CustomEvent('open', {
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('open'));
         this.render();
         requestAnimationFrame(() => {
             if (!this.shadowRoot)
@@ -1510,7 +995,6 @@ export class TyDatePicker extends TyComponent {
                 const stubEl = this.shadowRoot.querySelector('.date-picker-stub');
                 if (stubEl)
                     stubEl.setAttribute('aria-expanded', 'true');
-                // Remove focus from any focused elements to prevent the blue outline
                 const focusedElement = this.shadowRoot.activeElement;
                 if (focusedElement) {
                     focusedElement.blur();
@@ -1518,17 +1002,11 @@ export class TyDatePicker extends TyComponent {
             }
         });
     }
-    /**
-     * Close calendar dropdown
-     *
-     * PORTED FROM: close-dropdown! in date_picker.cljs
-     */
     closeDropdown() {
         if (!this._state.open)
             return;
         this._closeTimestamp = Date.now();
         const pickerId = `date-picker-${this.id || this.toString()}`;
-        // Force sync any staged updates when closing
         this.updateState({ open: false }, true);
         unlockScroll(pickerId);
         if (this.shadowRoot) {
@@ -1537,63 +1015,46 @@ export class TyDatePicker extends TyComponent {
                 dialog.classList.remove('position-above', 'position-below', 'open');
                 dialog.close();
             }
-            // closeDropdown() doesn't call render(), so the stub's aria-expanded
-            // (still "true" from open) needs an explicit flip here too.
             const stubEl = this.shadowRoot.querySelector('.date-picker-stub');
             if (stubEl)
                 stubEl.setAttribute('aria-expanded', 'false');
         }
-        this.dispatchEvent(new CustomEvent('close', {
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('close'));
         this.render();
     }
-    // ==========================================================================
-    // Cleanup
-    // ==========================================================================
-    /**
-     * Clean up event listeners and state
-     *
-     * PORTED FROM: cleanup! in date_picker.cljs
-     */
     cleanup() {
-        // Remove document listeners
         if (this._clickListener) {
             document.removeEventListener('click', this._clickListener);
         }
         if (this._keydownListener) {
             document.removeEventListener('keydown', this._keydownListener);
         }
-        // Remove dialog listener
         if (this._dialogClickListener && this.shadowRoot) {
             const dialog = this.shadowRoot.querySelector('.calendar-dialog');
             if (dialog) {
                 dialog.removeEventListener('click', this._dialogClickListener);
             }
         }
-        // Unlock scroll if open
         if (this._state.open) {
             const pickerId = `date-picker-${this.id || this.toString()}`;
             unlockScroll(pickerId);
         }
-        // Clear references
         this._clickListener = undefined;
         this._keydownListener = undefined;
         this._dialogClickListener = undefined;
         this._timeInput = undefined;
     }
 }
-// ============================================================================
-// PROPERTY CONFIGURATION - Single source of truth
-// ============================================================================
 TyDatePicker.properties = {
-    // String properties
+    placement: {
+        type: 'string',
+        visual: true,
+        default: '',
+    },
     size: {
         type: 'string',
         visual: true,
         default: 'md',
-        // Fields come in exactly three sizes; legacy xs/xl map to sm/lg.
         validate: (v) => ['sm', 'md', 'lg'].includes(v),
         coerce: (v) => {
             if (v === 'xs')
@@ -1624,10 +1085,9 @@ TyDatePicker.properties = {
     },
     name: {
         type: 'string',
-        visual: false, // Non-visual, just for form field name
+        visual: false,
         default: ''
     },
-    // Date bounds (ISO) — passed through to the embedded ty-calendar
     min: {
         type: 'string',
         visual: true,
@@ -1638,7 +1098,6 @@ TyDatePicker.properties = {
         visual: true,
         default: ''
     },
-    // Boolean properties
     required: {
         type: 'boolean',
         visual: true,
@@ -1657,7 +1116,6 @@ TyDatePicker.properties = {
             'not-clearable': false
         }
     },
-    // Format property (medium complexity)
     format: {
         type: 'string',
         visual: true,
@@ -1672,34 +1130,25 @@ TyDatePicker.properties = {
             return v;
         }
     },
-    // Locale property (medium complexity - has observer)
     locale: {
         type: 'string',
         visual: true,
         default: ''
     },
-    // Value property (high complexity - UTC parsing, date components)
-    // Note: Custom getter/setter will handle the complex logic
     value: {
         type: 'string',
         visual: true,
-        formValue: true, // Syncs to form
-        emitChange: false, // We emit custom 'change' events manually with full detail
-        default: null // null when no date selected
+        formValue: true,
+        emitChange: false,
+        default: null
     },
-    // With-time property (high complexity - affects parsing and rendering)
     'with-time': {
         type: 'boolean',
         visual: true,
         default: false
     }
 };
-/**
- * Form-associated custom element
- */
 TyDatePicker.formAssociated = true;
-// Register custom element
 if (!customElements.get('ty-date-picker')) {
     customElements.define('ty-date-picker', TyDatePicker);
 }
-//# sourceMappingURL=date-picker.js.map