@melodicdev/components 1.5.9 → 1.5.11

package/lib/components/forms/autocomplete/autocomplete.component.d.ts

@@ -69,6 +69,10 @@ export declare class AutocompleteComponent implements IElementRef, OnCreate, OnD
     loading: boolean;
     /** Resolved async results */
     asyncOptions: AutocompleteOption[];
+    /** Initial option providing label for pre-set value (single mode, async) */
+    initialOption: AutocompleteOption | null;
+    /** Initial options providing labels for pre-set values (multi mode, async) */
+    initialOptions: AutocompleteOption[];
     private readonly _handleKeyDown;
     private readonly _handleDocumentClick;
     private _handleScroll;

package/lib/components/forms/autocomplete/autocomplete.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/autocomplete/autocomplete.component.ts"],"names":[],"mappings":"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"}

package/lib/components/forms/autocomplete/autocomplete.component.js

@@ -76,6 +76,10 @@ let AutocompleteComponent = class AutocompleteComponent {
         this.loading = false;
         /** Resolved async results */
         this.asyncOptions = [];
+        /** Initial option providing label for pre-set value (single mode, async) */
+        this.initialOption = null;
+        /** Initial options providing labels for pre-set values (multi mode, async) */
+        this.initialOptions = [];
         this._handleKeyDown = this.onKeyDown.bind(this);
         this._handleDocumentClick = this.onDocumentClick.bind(this);
         this._handleScroll = null;
@@ -277,7 +281,8 @@ let AutocompleteComponent = class AutocompleteComponent {
     /** Get the selected option (single mode) */
     get selectedOption() {
         return this.allOptions.find((opt) => opt.value === this.value)
-            ?? this.options.find((opt) => opt.value === this.value);
+            ?? this.options.find((opt) => opt.value === this.value)
+            ?? (this.initialOption?.value === this.value ? this.initialOption : undefined);
     }
     /** Get selected options (multi mode) */
     get selectedOptions() {
@@ -286,8 +291,10 @@ let AutocompleteComponent = class AutocompleteComponent {
         }
         const found = this.allOptions.filter((opt) => this.values.includes(opt.value));
         const foundValues = new Set(found.map((opt) => opt.value));
-        const fallback = this.options.filter((opt) => this.values.includes(opt.value) && !foundValues.has(opt.value));
-        return [...found, ...fallback];
+        const staticFallback = this.options.filter((opt) => this.values.includes(opt.value) && !foundValues.has(opt.value));
+        staticFallback.forEach((opt) => foundValues.add(opt.value));
+        const initialFallback = this.initialOptions.filter((opt) => this.values.includes(opt.value) && !foundValues.has(opt.value));
+        return [...found, ...staticFallback, ...initialFallback];
     }
     /** All available options (static or async) */
     get allOptions() {

package/lib/components/forms/date-picker/date-picker.component.d.ts

@@ -2,6 +2,8 @@ import type { IElementRef, OnCreate, OnDestroy } from '@melodicdev/core';
 /**
  * ml-date-picker - Date input with calendar dropdown
  *
+ * Users can type a date directly into the input or pick from the calendar popover.
+ *
  * @example
  * ```html
  * <ml-date-picker label="Start date" value="2026-02-08"></ml-date-picker>
@@ -35,11 +37,14 @@ export declare class DatePickerComponent implements IElementRef, OnCreate, OnDes
     /** Whether the calendar popover is open */
     isOpen: boolean;
     private _cleanupAutoUpdate;
-    get displayValue(): string;
     onCreate(): void;
     onDestroy(): void;
     toggleCalendar: () => void;
-    /** Called when a day is clicked - selects immediately and closes */
+    /** Called when the user types a date into the input */
+    handleInput: (event: Event) => void;
+    /** Clicking the input opens the calendar */
+    handleInputClick: () => void;
+    /** Called when a day is clicked in the calendar - selects immediately and closes */
     handleDateSelect: (event: Event) => void;
     handleKeyDown: (event: KeyboardEvent) => void;
     private commitValue;
@@ -48,6 +53,7 @@ export declare class DatePickerComponent implements IElementRef, OnCreate, OnDes
     private startPositioning;
     private updatePosition;
     private returnFocus;
+    private getInputEl;
     private getTriggerEl;
     private getPopoverEl;
 }

package/lib/components/forms/date-picker/date-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAiBzE;;;;;;;;;;GAUG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,oEAAoE;IAC7D,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
+{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEhD,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAGvC;IAEF,4CAA4C;IACrC,gBAAgB,QAAO,IAAI,CAIhC;IAEF,oFAAoF;IAC7E,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}

package/lib/components/forms/date-picker/date-picker.component.js

@@ -8,21 +8,11 @@ import { MelodicComponent } from '@melodicdev/core';
 import { computePosition, autoUpdate, offset, flip, shift } from '../../../utils/positioning/index.js';
 import { datePickerTemplate } from './date-picker.template.js';
 import { datePickerStyles } from './date-picker.styles.js';
-const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-function formatDisplay(iso) {
-    if (!iso)
-        return '';
-    const parts = iso.split('-');
-    if (parts.length !== 3)
-        return iso;
-    const month = parseInt(parts[1], 10) - 1;
-    const day = parseInt(parts[2], 10);
-    const year = parseInt(parts[0], 10);
-    return `${MONTH_SHORT[month]} ${day}, ${year}`;
-}
 /**
  * ml-date-picker - Date input with calendar dropdown
  *
+ * Users can type a date directly into the input or pick from the calendar popover.
+ *
  * @example
  * ```html
  * <ml-date-picker label="Start date" value="2026-02-08"></ml-date-picker>
@@ -64,7 +54,18 @@ let DatePickerComponent = class DatePickerComponent {
                 popoverEl.togglePopover();
             }
         };
-        /** Called when a day is clicked - selects immediately and closes */
+        /** Called when the user types a date into the input */
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.commitValue(input.value);
+        };
+        /** Clicking the input opens the calendar */
+        this.handleInputClick = () => {
+            if (!this.isOpen) {
+                this.toggleCalendar();
+            }
+        };
+        /** Called when a day is clicked in the calendar - selects immediately and closes */
         this.handleDateSelect = (event) => {
             event.stopPropagation();
             const detail = event.detail;
@@ -76,9 +77,19 @@ let DatePickerComponent = class DatePickerComponent {
                 event.preventDefault();
                 this.closePopover();
             }
-            else if ((event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') && !this.isOpen) {
+            // Prevent Space from triggering the native date picker
+            if (event.key === ' ') {
                 event.preventDefault();
-                this.toggleCalendar();
+                if (!this.isOpen) {
+                    this.toggleCalendar();
+                }
+            }
+            // Prevent F4 / Alt+Down from triggering the native picker in some browsers
+            if (event.key === 'F4' || (event.altKey && event.key === 'ArrowDown')) {
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.toggleCalendar();
+                }
             }
         };
         this._handleToggle = (event) => {
@@ -95,9 +106,6 @@ let DatePickerComponent = class DatePickerComponent {
             }
         };
     }
-    get displayValue() {
-        return formatDisplay(this.value);
-    }
     onCreate() {
         const popoverEl = this.getPopoverEl();
         if (popoverEl) {
@@ -144,11 +152,14 @@ let DatePickerComponent = class DatePickerComponent {
         popoverEl.style.top = `${y}px`;
     }
     returnFocus() {
-        const triggerEl = this.getTriggerEl();
-        if (triggerEl) {
-            triggerEl.focus();
+        const inputEl = this.getInputEl();
+        if (inputEl) {
+            inputEl.focus();
         }
     }
+    getInputEl() {
+        return this.elementRef.shadowRoot?.querySelector('.ml-date-picker__input');
+    }
     getTriggerEl() {
         return this.elementRef.shadowRoot?.querySelector('.ml-date-picker__trigger');
     }

package/lib/components/forms/date-picker/date-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiN5B,CAAC"}
+{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA2O5B,CAAC"}

package/lib/components/forms/date-picker/date-picker.styles.js

@@ -75,32 +75,24 @@ export const datePickerStyles = () => css `
 		margin-left: var(--ml-space-0-5);
 	}
 
-	/* Trigger button */
+	/* Trigger wrapper */
 	.ml-date-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-date-picker-gap);
 		width: 100%;
-		padding: var(--ml-date-picker-padding);
 		border: var(--ml-date-picker-border-width) solid var(--ml-date-picker-border-color);
 		border-radius: var(--ml-date-picker-border-radius);
 		background-color: var(--ml-date-picker-bg);
-		color: var(--ml-date-picker-color);
-		cursor: pointer;
-		font-family: var(--ml-date-picker-font-family);
-		font-size: var(--ml-date-picker-font-size);
-		text-align: left;
 		transition:
 			border-color var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing),
 			box-shadow var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing);
 	}
 
-	.ml-date-picker__trigger:hover:not(:disabled) {
+	.ml-date-picker__trigger:hover:not(:has(:disabled)) {
 		border-color: var(--ml-date-picker-hover-border-color);
 	}
 
-	.ml-date-picker__trigger:focus-visible {
-		outline: none;
+	.ml-date-picker__trigger:focus-within {
 		border-color: var(--ml-date-picker-focus-border-color);
 		box-shadow: var(--ml-date-picker-focus-shadow);
 	}
@@ -114,7 +106,7 @@ export const datePickerStyles = () => css `
 		border-color: var(--ml-date-picker-error-border-color);
 	}
 
-	.ml-date-picker--error .ml-date-picker__trigger:focus-visible,
+	.ml-date-picker--error .ml-date-picker__trigger:focus-within,
 	.ml-date-picker--error.ml-date-picker--open .ml-date-picker__trigger {
 		box-shadow: var(--ml-date-picker-error-focus-shadow);
 	}
@@ -125,39 +117,73 @@ export const datePickerStyles = () => css `
 		background-color: var(--ml-date-picker-disabled-bg);
 	}
 
+	/* Date input */
+	.ml-date-picker__input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		outline: none;
+		background: transparent;
+		color: var(--ml-date-picker-color);
+		font-family: var(--ml-date-picker-font-family);
+		font-size: var(--ml-date-picker-font-size);
+		padding: var(--ml-date-picker-padding);
+	}
+
+	/* Hide native date picker indicator across browsers */
+	.ml-date-picker__input::-webkit-calendar-picker-indicator {
+		display: none;
+		-webkit-appearance: none;
+	}
+
+	.ml-date-picker__input::-webkit-date-and-time-value {
+		text-align: left;
+	}
+
+	.ml-date-picker__input:disabled {
+		cursor: not-allowed;
+	}
+
 	/* Sizes */
-	.ml-date-picker--sm .ml-date-picker__trigger {
+	.ml-date-picker--sm .ml-date-picker__input {
 		padding: var(--ml-space-2) var(--ml-space-3);
 		font-size: var(--ml-text-sm);
 	}
 
-	.ml-date-picker--md .ml-date-picker__trigger {
+	.ml-date-picker--md .ml-date-picker__input {
 		padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		font-size: var(--ml-text-sm);
 	}
 
-	.ml-date-picker--lg .ml-date-picker__trigger {
+	.ml-date-picker--lg .ml-date-picker__input {
 		padding: var(--ml-space-3) var(--ml-space-3-5);
 		font-size: var(--ml-text-base);
 	}
 
-	/* Icon */
-	.ml-date-picker__icon {
-		flex-shrink: 0;
+	/* Calendar button */
+	.ml-date-picker__calendar-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		padding: 0 var(--ml-space-3) 0 0;
 		color: var(--ml-date-picker-icon-color);
+		transition: color var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing);
 	}
 
-	/* Value */
-	.ml-date-picker__value {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	.ml-date-picker__calendar-btn:hover:not(:disabled) {
+		color: var(--ml-date-picker-color);
 	}
 
-	.ml-date-picker__value--placeholder {
-		color: var(--ml-date-picker-placeholder-color);
+	.ml-date-picker__calendar-btn:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Icon */
+	.ml-date-picker__icon {
+		flex-shrink: 0;
 	}
 
 	/* Popover */

package/lib/components/forms/date-picker/date-picker.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CAkDxD"}
+{"version":3,"file":"date-picker.template.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,mBAAmB,6CA4DxD"}

package/lib/components/forms/date-picker/date-picker.template.js

@@ -15,23 +15,33 @@ export function datePickerTemplate(c) {
 				</label>
 			`)}
 
-			<button
-				type="button"
-				class="ml-date-picker__trigger"
-				?disabled=${c.disabled}
-				aria-haspopup="dialog"
-				aria-expanded=${c.isOpen ? 'true' : 'false'}
-				@click=${c.toggleCalendar}
-				@keydown=${c.handleKeyDown}
-			>
-				<ml-icon icon="calendar-blank" size="sm" class="ml-date-picker__icon"></ml-icon>
-				<span class=${classMap({
-        'ml-date-picker__value': true,
-        'ml-date-picker__value--placeholder': !c.value
-    })}>
-					${c.value ? c.displayValue : c.placeholder}
-				</span>
-			</button>
+			<div class="ml-date-picker__trigger">
+				<input
+					type="date"
+					class="ml-date-picker__input"
+					.value=${c.value}
+					min=${c.min}
+					max=${c.max}
+					placeholder=${c.placeholder}
+					?disabled=${c.disabled}
+					?required=${c.required}
+					aria-haspopup="dialog"
+					aria-expanded=${c.isOpen ? 'true' : 'false'}
+					@change=${c.handleInput}
+					@click=${c.handleInputClick}
+					@keydown=${c.handleKeyDown}
+				/>
+				<button
+					type="button"
+					class="ml-date-picker__calendar-btn"
+					?disabled=${c.disabled}
+					aria-label="Open calendar"
+					tabindex="-1"
+					@click=${c.toggleCalendar}
+				>
+					<ml-icon icon="calendar-blank" size="sm" class="ml-date-picker__icon"></ml-icon>
+				</button>
+			</div>
 
 			<div class="ml-date-picker__popover" popover="auto">
 				<ml-calendar

package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,yDAAyD;IAClD,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAA0B;IAE5C,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,2BAA2B;IACpB,IAAI,SAAM;IAEjB,yCAAyC;IAClC,UAAU,UAAQ;IAEzB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA4B5B,OAAO,CAAC,UAAU;CAqBlB"}
+{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,yDAAyD;IAClD,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAA0B;IAE5C,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,2BAA2B;IACpB,IAAI,SAAM;IAEjB,yCAAyC;IAClC,UAAU,UAAQ;IAEzB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA+E5B,OAAO,CAAC,UAAU;CAqBlB"}

package/lib/components/forms/date-time-picker/date-time-picker.component.js

@@ -140,6 +140,53 @@ let DateTimePickerComponent = class DateTimePickerComponent {
             timePicker.addEventListener('ml:change', handler);
             this._listeners.push(() => timePicker.removeEventListener('ml:change', handler));
         }
+        // Bridge Tab focus between date input and time input across shadow boundaries.
+        // Internal segment navigation (month→day→year, hour→minute→am/pm) doesn't
+        // fire focusout on the <input>, so we only intercept when focus actually leaves.
+        if (datePicker && timePicker) {
+            const dateInput = datePicker.shadowRoot?.querySelector('input');
+            const timeInput = timePicker.shadowRoot?.querySelector('input');
+            if (dateInput && timeInput) {
+                let tabForward = false;
+                let tabBackward = false;
+                const dateKeydown = (e) => {
+                    if (e.key === 'Tab' && !e.shiftKey) {
+                        tabForward = true;
+                        requestAnimationFrame(() => { tabForward = false; });
+                    }
+                };
+                const dateFocusOut = () => {
+                    if (tabForward) {
+                        tabForward = false;
+                        timeInput.focus();
+                    }
+                };
+                dateInput.addEventListener('keydown', dateKeydown);
+                dateInput.addEventListener('focusout', dateFocusOut);
+                this._listeners.push(() => {
+                    dateInput.removeEventListener('keydown', dateKeydown);
+                    dateInput.removeEventListener('focusout', dateFocusOut);
+                });
+                const timeKeydown = (e) => {
+                    if (e.key === 'Tab' && e.shiftKey) {
+                        tabBackward = true;
+                        requestAnimationFrame(() => { tabBackward = false; });
+                    }
+                };
+                const timeFocusOut = () => {
+                    if (tabBackward) {
+                        tabBackward = false;
+                        dateInput.focus();
+                    }
+                };
+                timeInput.addEventListener('keydown', timeKeydown);
+                timeInput.addEventListener('focusout', timeFocusOut);
+                this._listeners.push(() => {
+                    timeInput.removeEventListener('keydown', timeKeydown);
+                    timeInput.removeEventListener('focusout', timeFocusOut);
+                });
+            }
+        }
     }
     emitChange() {
         if (this.dateValue && this.timeValue) {

package/lib/components/forms/time-picker/time-picker.component.d.ts

@@ -66,6 +66,10 @@ export declare class TimePickerComponent implements IElementRef, OnCreate, OnDes
     togglePeriod: () => void;
     confirmSelection: () => void;
     handleNowClick: () => void;
+    /** Called when the user types a time into the input */
+    handleTimeInput: (event: Event) => void;
+    /** Clicking the input opens the popover */
+    handleInputClick: () => void;
     handleKeyDown: (event: KeyboardEvent) => void;
     handleHourInput: (event: Event) => void;
     handleMinuteInput: (event: Event) => void;
@@ -83,6 +87,7 @@ export declare class TimePickerComponent implements IElementRef, OnCreate, OnDes
     private startPositioning;
     private updatePosition;
     private returnFocus;
+    private getInputEl;
     private getTriggerEl;
     private getPopoverEl;
 }

package/lib/components/forms/time-picker/time-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,gDAAgD;IACzC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,uFAAuF;IAChF,IAAI,SAAM;IAEjB,oDAAoD;IAC7C,UAAU,UAAQ;IAEzB,kCAAkC;IAC3B,MAAM,UAAS;IAEtB,2BAA2B;IACpB,QAAQ,SAAK;IAEpB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,oCAAoC;IAC7B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEtC,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,IAAW,WAAW,IAAI,MAAM,CAQ/B;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAM7B;IAEK,aAAa,QAAO,IAAI,CAS7B;IAEK,aAAa,QAAO,IAAI,CAQ7B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,YAAY,QAAO,IAAI,CAI5B;IAEK,gBAAgB,QAAO,IAAI,CAOhC;IAEK,cAAc,QAAO,IAAI,CAM9B;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQjD;IAEK,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAa3C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,cAAc,QAAO,IAAI,CAK9B;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAE5C;IAEK,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBxD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
+{"version":3,"file":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,gDAAgD;IACzC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,uFAAuF;IAChF,IAAI,SAAM;IAEjB,oDAAoD;IAC7C,UAAU,UAAQ;IAEzB,kCAAkC;IAC3B,MAAM,UAAS;IAEtB,2BAA2B;IACpB,QAAQ,SAAK;IAEpB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,oCAAoC;IAC7B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEtC,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,IAAW,WAAW,IAAI,MAAM,CAQ/B;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAM7B;IAEK,aAAa,QAAO,IAAI,CAS7B;IAEK,aAAa,QAAO,IAAI,CAQ7B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,YAAY,QAAO,IAAI,CAI5B;IAEK,gBAAgB,QAAO,IAAI,CAOhC;IAEK,cAAc,QAAO,IAAI,CAM9B;IAEF,uDAAuD;IAChD,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAG3C;IAEF,2CAA2C;IACpC,gBAAgB,QAAO,IAAI,CAIhC;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmBjD;IAEK,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAa3C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,cAAc,QAAO,IAAI,CAK9B;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAE5C;IAEK,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBxD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}

package/lib/components/forms/time-picker/time-picker.component.js

@@ -147,14 +147,35 @@ let TimePickerComponent = class TimePickerComponent {
             this.editSecond = now.getSeconds();
             this.editPeriod = this.editHour >= 12 ? 'PM' : 'AM';
         };
+        /** Called when the user types a time into the input */
+        this.handleTimeInput = (event) => {
+            const input = event.target;
+            this.commitValue(input.value);
+        };
+        /** Clicking the input opens the popover */
+        this.handleInputClick = () => {
+            if (!this.isOpen) {
+                this.togglePopover();
+            }
+        };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape' && this.isOpen) {
                 event.preventDefault();
                 this.closePopover();
             }
-            else if ((event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') && !this.isOpen) {
+            // Prevent Space from triggering the native time picker
+            if (event.key === ' ') {
                 event.preventDefault();
-                this.togglePopover();
+                if (!this.isOpen) {
+                    this.togglePopover();
+                }
+            }
+            // Prevent F4 / Alt+Down from triggering the native picker in some browsers
+            if (event.key === 'F4' || (event.altKey && event.key === 'ArrowDown')) {
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.togglePopover();
+                }
             }
         };
         this.handleHourInput = (event) => {
@@ -346,11 +367,14 @@ let TimePickerComponent = class TimePickerComponent {
         popoverEl.style.top = `${y}px`;
     }
     returnFocus() {
-        const triggerEl = this.getTriggerEl();
-        if (triggerEl) {
-            triggerEl.focus();
+        const inputEl = this.getInputEl();
+        if (inputEl) {
+            inputEl.focus();
         }
     }
+    getInputEl() {
+        return this.elementRef.shadowRoot?.querySelector('.ml-time-picker__input');
+    }
     getTriggerEl() {
         return this.elementRef.shadowRoot?.querySelector('.ml-time-picker__trigger');
     }

package/lib/components/forms/time-picker/time-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAqa5B,CAAC"}
+{"version":3,"file":"time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA+b5B,CAAC"}