@ukic/canary-web-components 3.0.0-canary.32 → 3.0.0-canary.34

package/dist/esm/ic-time-input.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { b as isEmptyString, l as getInputDescribedByText, m as isNumeric, n as IcInformationStatus, r as removeDisabledFalse, q as removeFormResetListener, s as addFormResetListener, o as onComponentRequiredPropUndefined, t as renderHiddenInput } from './helpers-9f228880.js';
+import { b as isEmptyString, l as parseTimeHelper, m as getInputDescribedByText, n as isNumeric, q as IcInformationStatus, r as removeDisabledFalse, s as removeFormResetListener, t as addFormResetListener, o as onComponentRequiredPropUndefined, u as renderHiddenInput } from './helpers-a08b3f32.js';
 import { C as Clear } from './clear-icon-1c79bda2.js';
 
 const Clock = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clock-outline</title><path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /></svg>`;
 
-const icTimeInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-time-picker-field-background);--ic-input-label-text-color:var(--ic-time-picker-label);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle);--border-color:var(--ic-time-picker-time-field-border-default);--border-color-disabled:var(--ic-time-picker-border-disabled);--border-color-hover:var(--ic-time-picker-time-field-border-hover);--border-color-pressed:var(--ic-time-picker-time-field-border-pressed);--border-error-color:var(--ic-time-picker-border-error);--border-error-color-hover:var(--ic-time-picker-border-error-hover);--border-error-color-pressed:var(--ic-time-picker-border-error-pressed);--border-success-color:var(--ic-time-picker-border-success);--border-success-color-hover:var(--ic-time-picker-border-success-hover);--border-success-color-pressed:var(--ic-time-picker-border-success-pressed);--border-warning-color:var(--ic-time-picker-border-warning);--border-warning-color-hover:var(--ic-time-picker-border-warning-hover);--border-warning-color-pressed:var(--ic-time-picker-border-warning-pressed);--input-width:calc((4 * var(--ic-space-xxl)) + var(--ic-space-xxs))}:host(.ic-time-input-disabled){--ic-input-label-text-color:var(--ic-time-picker-label-disabled);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle-disabled)}:host(.ic-time-input-disabled) input{color:var(--ic-time-picker-time-text-disabled)}:host(.ic-time-input-large){--input-width:calc(\n    (4 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-lg)\n  )}:host(.ic-time-input-small){--input-width:calc(\n    (3 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-xl)\n  )}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-time-picker-time-text-default);caret-color:var(--ic-time-picker-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-time-picker-time-text-default) !important}input::-moz-placeholder{color:var(--ic-time-picker-field-placeholder-text)}input::placeholder{color:var(--ic-time-picker-field-placeholder-text)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.time-inputs{color:var(--ic-time-picker-field-placeholder-text)}.hour-input{width:1.438rem}.minute-input{width:1.813rem}.second-input,.second-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-clock-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.clock-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.clock-button:focus,.clear-button:active,.clock-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.clock-button:focus,.clock-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.clock-button:focus,.clear-button:active *,.clock-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-time-picker-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-time-picker-status-text);--ic-input-validation-error:var(--ic-time-picker-icon-error);--ic-input-validation-warning-icon-color:var(--ic-time-picker-icon-warning);--ic-input-validation-success-icon-color:var(--ic-time-picker-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentcolor}}";
+const icTimeInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-time-picker-field-background);--ic-input-label-text-color:var(--ic-time-picker-label);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle);--border-color:var(--ic-time-picker-time-field-border-default);--border-color-disabled:var(--ic-time-picker-border-disabled);--border-color-hover:var(--ic-time-picker-time-field-border-hover);--border-color-pressed:var(--ic-time-picker-time-field-border-pressed);--border-error-color:var(--ic-time-picker-border-error);--border-error-color-hover:var(--ic-time-picker-border-error-hover);--border-error-color-pressed:var(--ic-time-picker-border-error-pressed);--border-success-color:var(--ic-time-picker-border-success);--border-success-color-hover:var(--ic-time-picker-border-success-hover);--border-success-color-pressed:var(--ic-time-picker-border-success-pressed);--border-warning-color:var(--ic-time-picker-border-warning);--border-warning-color-hover:var(--ic-time-picker-border-warning-hover);--border-warning-color-pressed:var(--ic-time-picker-border-warning-pressed);--input-width:calc((4 * var(--ic-space-xxl)) + var(--ic-space-xxs))}:host(.ic-time-input-disabled){--ic-input-label-text-color:var(--ic-time-picker-label-disabled);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle-disabled)}:host(.ic-time-input-disabled) input{color:var(--ic-time-picker-time-text-disabled)}:host(.ic-time-input-large){--input-width:calc(\n    (4 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-lg)\n  )}:host(.ic-time-input-small){--input-width:calc(\n    (3 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-xl)\n  )}.with-am-pm-toggle{display:flex;flex-direction:row}.am-pm-toggle ::part(button){min-width:-moz-fit-content;min-width:fit-content}.am-pm-toggle{margin-left:var(--ic-space-xs)}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-time-picker-time-text-default);caret-color:var(--ic-time-picker-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-time-picker-time-text-default) !important}input::-moz-placeholder{color:var(--ic-time-picker-field-placeholder-text)}input::placeholder{color:var(--ic-time-picker-field-placeholder-text)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.time-inputs{color:var(--ic-time-picker-field-placeholder-text)}.hour-input{width:1.438rem}.minute-input{width:1.813rem}.second-input{width:1.18rem}.millisecond-input,.millisecond-input.fit-to-value{width:1.75rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-clock-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.clock-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.clock-button:focus,.clear-button:active,.clock-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.clock-button:focus,.clock-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.clock-button:focus,.clear-button:active *,.clock-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-time-picker-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-time-picker-status-text);--ic-input-validation-error:var(--ic-time-picker-icon-error);--ic-input-validation-warning-icon-color:var(--ic-time-picker-icon-warning);--ic-input-validation-success-icon-color:var(--ic-time-picker-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentcolor}}";
 const IcTimeInputStyle0 = icTimeInputCss;
 
 let inputIds = 0;
@@ -13,9 +13,10 @@ const TimeInput = class {
         registerInstance(this, hostRef);
         this.clockButtonClicked = createEvent(this, "clockButtonClicked", 7);
         this.icBlur = createEvent(this, "icBlur", 7);
-        this.icChange = createEvent(this, "icChange", 7);
+        this.icTimeChange = createEvent(this, "icTimeChange", 7);
         this.icFocus = createEvent(this, "icFocus", 7);
         this.DEFAULT_TIME_FORMAT = "HH:MM:SS";
+        this.TOGGLE_BUTTON_SELECTOR = "ic-toggle-button";
         this.ARIA_INVALID = "aria-invalid";
         this.ARIA_LABEL = "aria-label";
         this.ARIA_LABELLED_BY = "aria-labelledby";
@@ -26,6 +27,7 @@ const TimeInput = class {
         this.isValidHour = true;
         this.isValidMinute = true;
         this.isValidSecond = true;
+        this.isValidMillisecond = true;
         this.isValidTime = true;
         this.isTimeSetFromKeyboardEvent = false;
         this.previousSelectedTime = null;
@@ -34,22 +36,30 @@ const TimeInput = class {
         this.clearInput = false;
         this.maxTime = null;
         this.minTime = null;
+        this.previousHour = "";
+        this.previousMinute = "";
+        this.previousSecond = "";
+        this.previousMillisecond = "";
+        this.previousPeriod = "AM";
         this.clockFocused = false;
         this.clearButtonFocused = false;
         this.removeLabelledBy = false;
         this.hour = "";
         this.minute = "";
         this.second = "";
+        this.millisecond = "";
+        this.period = "AM";
+        this.isSSSFormat = () => this.timeFormat === "HH:MM:SS.SSS";
         /**
          * If `true`, the disabled state will be set.
          */
         this.disabled = false;
         /**
-         * An array of times that will be disabled in the time input. The times can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         * An array of objects with start and end values that will be disabled in the time input. The times can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
          */
         this.disableTimes = [];
         /**
-         * If `true`, every individual input field completed will emit an icChange event.
+         * If `true`, every individual input field completed will emit an icTimeChange event.
          */
         this.emitTimePartChange = false;
         /**
@@ -84,6 +94,10 @@ const TimeInput = class {
          * If `true`, the input will require a value.
          */
         this.required = false;
+        /**
+         * If `true`, the time input will show an AM/PM toggle when in 12-hour time period.
+         */
+        this.showAmPmToggle = false;
         /**
          * If `true`, a button which clears the time input when clicked will be displayed.
          */
@@ -131,19 +145,6 @@ const TimeInput = class {
                 inputEl.classList.add(this.FIT_TO_VALUE);
             }
         };
-        this.parseTime = (value) => {
-            if (!value)
-                return null;
-            if (value instanceof Date)
-                return value;
-            const parts = value.split(":");
-            if (parts.length >= 2) {
-                const d = new Date();
-                d.setHours(+parts[0], +parts[1], parts[2] ? +parts[2] : 0, 0);
-                return d;
-            }
-            return null;
-        };
         this.isHHMMFormat = () => this.timeFormat === "HH:MM";
         this.isKeyboardOrEvent = (event) => {
             return (Object.prototype.toString.call(event) === this.EVENT_OBJECT_STRING ||
@@ -171,9 +172,22 @@ const TimeInput = class {
                 else {
                     this.isValidSecond = true;
                 }
+                if (this.isSSSFormat()) {
+                    if (!isEmptyString(this.millisecond)) {
+                        this.isValidMillisecond =
+                            +this.millisecond >= 0 && +this.millisecond <= 999;
+                    }
+                    else {
+                        this.isValidMillisecond = true;
+                    }
+                }
+                else {
+                    this.isValidMillisecond = true;
+                }
             }
             else {
                 this.isValidSecond = true;
+                this.isValidMillisecond = true;
             }
         };
         this.setInputValue = (input, clear = false) => {
@@ -187,6 +201,9 @@ const TimeInput = class {
             else if (input === this.secondInputEl && !this.isHHMMFormat()) {
                 this.second = newValue;
             }
+            else if (this.isSSSFormat() && input === this.millisecondInputEl) {
+                this.millisecond = newValue;
+            }
             this.setValidationMessage();
         };
         this.setPreventInput = (input, isPrevented) => {
@@ -199,22 +216,50 @@ const TimeInput = class {
             else if (input === this.secondInputEl) {
                 this.preventSecondInput = isPrevented;
             }
+            else if (this.isSSSFormat() && input === this.millisecondInputEl) {
+                this.preventMillisecondInput = isPrevented;
+            }
         };
         this.setValidationMessage = () => {
-            this.maxTime = this.parseTime(this.max);
-            this.minTime = this.parseTime(this.min);
+            this.maxTime = parseTimeHelper(this.max).date;
+            this.minTime = parseTimeHelper(this.min).date;
             this.setTimeValidity();
             let outOfBoundsMsg = "";
             let isDisabledTime = false;
             if (!isEmptyString(this.hour) &&
                 !isEmptyString(this.minute) &&
-                (this.isHHMMFormat() || !isEmptyString(this.second))) {
-                this.selectedTime = this.convertToTime(this.hour, this.minute, this.isHHMMFormat() ? "00" : this.second);
-                this.isValidTime =
-                    !!this.selectedTime &&
-                        this.selectedTime.getHours() == +this.hour &&
-                        this.selectedTime.getMinutes() == +this.minute &&
-                        (this.isHHMMFormat() || this.selectedTime.getSeconds() == +this.second);
+                (this.isHHMMFormat() || !isEmptyString(this.second)) &&
+                (!this.isSSSFormat() || !isEmptyString(this.millisecond))) {
+                this.selectedTime = this.convertToTime(this.hour, this.minute, this.isHHMMFormat() ? "00" : this.second, this.isSSSFormat() ? this.millisecond : "000");
+                const inputHour = +this.hour;
+                const selectedHour = this.selectedTime
+                    ? this.selectedTime.getHours()
+                    : null;
+                if (this.timePeriod === "12" &&
+                    this.showAmPmToggle &&
+                    selectedHour !== null) {
+                    let selectedHour12 = selectedHour % 12;
+                    if (selectedHour12 === 0)
+                        selectedHour12 = 12;
+                    this.isValidTime =
+                        !!this.selectedTime &&
+                            selectedHour12 == inputHour &&
+                            this.selectedTime.getMinutes() == +this.minute &&
+                            (this.isHHMMFormat() ||
+                                this.selectedTime.getSeconds() == +this.second) &&
+                            (!this.isSSSFormat() ||
+                                this.selectedTime.getMilliseconds() == +this.millisecond);
+                }
+                else {
+                    this.isValidTime =
+                        !!this.selectedTime &&
+                            this.selectedTime.getHours() == inputHour &&
+                            this.selectedTime.getMinutes() == +this.minute &&
+                            (this.isHHMMFormat() ||
+                                this.selectedTime.getSeconds() == +this.second) &&
+                            (!this.isSSSFormat() ||
+                                this.selectedTime.getMilliseconds() == +this.millisecond);
+                }
                 if (this.selectedTime &&
                     Array.isArray(this.disableTimes) &&
                     this.disableTimes.length > 0) {
@@ -223,18 +268,25 @@ const TimeInput = class {
                             t !== null &&
                             "start" in t &&
                             "end" in t) {
-                            const start = this.parseTime(t.start);
-                            const end = this.parseTime(t.end);
+                            const start = parseTimeHelper(t.start).date;
+                            const end = parseTimeHelper(t.end).date;
                             if (start && end) {
                                 return this.selectedTime >= start && this.selectedTime <= end;
                             }
                             return false;
                         }
-                        const parsed = this.parseTime(t);
-                        return (parsed &&
-                            parsed.getHours() === this.selectedTime.getHours() &&
-                            parsed.getMinutes() === this.selectedTime.getMinutes() &&
-                            parsed.getSeconds() === this.selectedTime.getSeconds());
+                        const parsed = parseTimeHelper(t).parts;
+                        if (!parsed)
+                            return false;
+                        let selectedHour = this.selectedTime.getHours();
+                        let parsedHour = parsed.hour;
+                        if (this.timePeriod === "12" && this.showAmPmToggle) {
+                            selectedHour = this.convertTo24Hour(selectedHour);
+                            parsedHour = this.convertTo24Hour(parsedHour);
+                        }
+                        return (parsedHour === selectedHour &&
+                            parsed.minute === this.selectedTime.getMinutes() &&
+                            parsed.second === this.selectedTime.getSeconds());
                     });
                     if (isDisabledTime) {
                         this.isValidTime = false;
@@ -264,6 +316,7 @@ const TimeInput = class {
             if (!(this.isValidHour &&
                 this.isValidMinute &&
                 this.isValidSecond &&
+                this.isValidMillisecond &&
                 this.isValidTime)) {
                 this.invalidTimeText = outOfBoundsMsg || this.invalidTimeMessage;
             }
@@ -275,12 +328,33 @@ const TimeInput = class {
             const hh = time.getHours().toString().padStart(2, "0");
             const mm = time.getMinutes().toString().padStart(2, "0");
             const ss = time.getSeconds().toString().padStart(2, "0");
+            const sss = time.getMilliseconds().toString().padStart(3, "0");
+            if (this.isSSSFormat()) {
+                return `${hh}:${mm}:${ss}.${sss}`;
+            }
             return this.isHHMMFormat() ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`;
         };
         this.handleInput = (event) => {
             const inputEvent = event;
             const input = event.target;
-            if (input !== this.hourInputEl) {
+            if (input === this.millisecondInputEl && this.isSSSFormat()) {
+                this.setInputValue(input);
+                this.setPreventInput(input, false);
+                this.setFitToValueStyling(input);
+                if (input.value.length === 3) {
+                    this.moveToNextInput(input);
+                    this.setPreventInput(input, true);
+                }
+                else {
+                    this.setPreventInput(input, false);
+                }
+                if (input.value.length === 0) {
+                    this.setInputValue(input, true);
+                    this.setValidationMessage();
+                }
+                this.notifyScreenReader(input);
+            }
+            else if (input !== this.hourInputEl) {
                 if (inputEvent.inputType !== "deleteContentBackward" &&
                     !this.preventAutoFormatting) {
                     if (input.value.length === 1 &&
@@ -313,6 +387,12 @@ const TimeInput = class {
                 if (input.value.length !== 2) {
                     this.setPreventInput(input, false);
                 }
+                this.setFitToValueStyling(input);
+                if (input.value.length === 0) {
+                    this.setInputValue(input, true);
+                    this.setValidationMessage();
+                }
+                this.notifyScreenReader(input);
             }
             else {
                 if (input.value.length === 2) {
@@ -326,18 +406,25 @@ const TimeInput = class {
                     this.setInputValue(input, true);
                     this.setPreventInput(input, false);
                 }
+                this.setFitToValueStyling(input);
+                if (input.value.length === 0) {
+                    this.setInputValue(input, true);
+                    this.setValidationMessage();
+                }
+                this.notifyScreenReader(input);
             }
-            this.setFitToValueStyling(input);
-            if (input.value.length === 0) {
-                this.setInputValue(input, true);
-                this.setValidationMessage();
-            }
-            this.notifyScreenReader(input);
         };
         this.handleKeyDown = (event, isInputPrevented) => {
             var _a;
+            const navKeys = /arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/i;
             const input = event.target;
             const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            if (!/-?\d*\.?\d+(e[-+]?\d+)?|[:]|[.]/i.test(eventKey) &&
+                !navKeys.test(eventKey) &&
+                !((event.ctrlKey || event.metaKey) &&
+                    (eventKey === "v" || eventKey === "c"))) {
+                event.preventDefault();
+            }
             const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[:]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
             if (!regex.test(eventKey) &&
                 !((event.ctrlKey || event.metaKey) &&
@@ -375,7 +462,18 @@ const TimeInput = class {
         };
         this.handleBlur = (event) => {
             const input = event.target;
-            if (input) {
+            if (input === this.millisecondInputEl && this.isSSSFormat()) {
+                if (input.value.length === 1) {
+                    input.value = `00${input.value}`;
+                    this.setInputValue(input);
+                }
+                else if (input.value.length === 2) {
+                    input.value = `0${input.value}`;
+                    this.setInputValue(input);
+                }
+                this.setFitToValueStyling(input);
+            }
+            else if (input) {
                 this.autocompleteInput(input);
             }
         };
@@ -431,20 +529,80 @@ const TimeInput = class {
         };
         this.setValueAndEmitChange = (value, force = false) => {
             if (this.value !== value || force) {
-                this.emitIcChange(value);
+                this.emitIcTimeChange(value);
                 this.value = value;
             }
         };
-        this.emitIcChange = (t) => {
-            this.selectedTime = t;
-            this.icChange.emit({
-                value: t,
-                timeObject: {
-                    hour: this.hour === "" ? null : this.hour,
-                    minute: this.minute === "" ? null : this.minute,
-                    second: this.second === "" ? null : this.second,
-                },
-            });
+        this.convertTo24Hour = (hour) => {
+            let date24hours = hour;
+            if (this.period === "PM" && hour < 12)
+                date24hours = hour + 12;
+            if (this.period === "AM" && hour === 12)
+                date24hours = 0;
+            return date24hours;
+        };
+        this.emitIcTimeChange = (t) => {
+            const hour = parseInt(this.hour);
+            const minute = parseInt(this.minute);
+            const second = parseInt(this.second);
+            const millisecond = parseInt(this.millisecond);
+            const period = this.period;
+            let allSelected = false;
+            if (this.isSSSFormat()) {
+                allSelected =
+                    this.hour !== "" &&
+                        this.minute !== "" &&
+                        this.second !== "" &&
+                        this.millisecond !== "";
+            }
+            else if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                allSelected =
+                    this.hour !== "" && this.minute !== "" && this.second !== "";
+            }
+            else if (this.timeFormat === "HH:MM") {
+                allSelected = this.hour !== "" && this.minute !== "";
+            }
+            let time = t;
+            let date24hours = hour;
+            if (hour != null &&
+                period &&
+                this.timePeriod === "12" &&
+                this.showAmPmToggle) {
+                date24hours = this.convertTo24Hour(hour);
+                time = new Date();
+                time.setHours(date24hours !== null && date24hours !== void 0 ? date24hours : 0);
+                time.setMinutes(minute !== null && minute !== void 0 ? minute : 0);
+                time.setSeconds(second !== null && second !== void 0 ? second : 0);
+                this.isSSSFormat() && time.setMilliseconds(millisecond !== null && millisecond !== void 0 ? millisecond : 0);
+            }
+            this.selectedTime = time;
+            const allTimePartsEmpty = this.hour === "" &&
+                this.minute === "" &&
+                this.second === "" &&
+                this.millisecond === "";
+            const onlyPeriodChanged = allTimePartsEmpty &&
+                this.period !== this.previousPeriod &&
+                this.previousHour === "" &&
+                this.previousMinute === "" &&
+                this.previousSecond === "" &&
+                this.previousMillisecond === "";
+            if (!onlyPeriodChanged) {
+                this.icTimeChange.emit({
+                    value: allSelected ? time : null,
+                    timeObject: {
+                        hour: this.hour === "" ? null : this.hour,
+                        minute: this.minute === "" ? null : this.minute,
+                        second: this.second === "" ? null : this.second,
+                        millisecond: this.millisecond === "" ? null : this.millisecond,
+                        period: this.period === "" ? null : this.period,
+                    },
+                });
+            }
+            this.previousHour = this.hour;
+            this.previousMinute = this.minute;
+            this.previousSecond = this.second;
+            this.previousMillisecond = this.millisecond;
+            this.previousPeriod = this.period;
         };
         this.setTime = (time) => {
             if (time === null || time === "" || time === undefined) {
@@ -454,6 +612,8 @@ const TimeInput = class {
                     this.minute = "";
                 if (this.second)
                     this.second = "";
+                if (this.millisecond)
+                    this.millisecond = "";
                 this.inputsInOrder.forEach((input) => {
                     input.classList.remove(this.FIT_TO_VALUE);
                     this.setPreventInput(input, false);
@@ -469,22 +629,26 @@ const TimeInput = class {
                         this.second = zuluMatch[3];
                     }
                     else {
-                        const parts = time.split(":");
+                        const parts = time.split(/[:.]/);
                         this.hour = parts[0] || "";
                         this.minute = parts[1] || "";
                         this.second = parts[2] || "";
+                        this.millisecond = parts[3] || "";
                     }
                 }
                 else if (time instanceof Date) {
                     this.hour = time.getHours().toString().padStart(2, "0");
                     this.minute = time.getMinutes().toString().padStart(2, "0");
                     this.second = time.getSeconds().toString().padStart(2, "0");
+                    if (this.isSSSFormat()) {
+                        this.millisecond = time.getMilliseconds().toString().padStart(3, "0");
+                    }
                 }
             }
             this.setValidationMessage();
         };
-        this.setAriaInvalid = (validHour, validMinute, validSecond) => {
-            var _a, _b, _c;
+        this.setAriaInvalid = (validHour, validMinute, validSecond, validMillisecond) => {
+            var _a, _b, _c, _d;
             if (this.inputsInOrder.length) {
                 this.inputsInOrder.forEach((input) => {
                     input.removeAttribute(this.ARIA_INVALID);
@@ -498,7 +662,10 @@ const TimeInput = class {
                 if (!validSecond) {
                     (_c = this.secondInputEl) === null || _c === void 0 ? void 0 : _c.setAttribute(this.ARIA_INVALID, "true");
                 }
-                if (!(validHour && validMinute && validSecond)) {
+                if (!validMillisecond) {
+                    (_d = this.millisecondInputEl) === null || _d === void 0 ? void 0 : _d.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!(validHour && validMinute && validSecond && validMillisecond)) {
                     this.inputsInOrder.forEach((input) => {
                         input.setAttribute(this.ARIA_INVALID, "true");
                     });
@@ -506,6 +673,7 @@ const TimeInput = class {
             }
         };
         this.handleClear = () => {
+            var _a;
             this.clearInput = true;
             if (this.hourInputEl) {
                 this.hourInputEl.value = "";
@@ -516,9 +684,25 @@ const TimeInput = class {
             if (!this.isHHMMFormat() && this.secondInputEl) {
                 this.secondInputEl.value = "";
             }
+            if (this.isSSSFormat() && this.millisecondInputEl) {
+                this.millisecondInputEl.value = "";
+            }
             this.hour = "";
             this.minute = "";
             this.second = "";
+            this.millisecond = "";
+            this.period = "AM";
+            if (this.showAmPmToggle) {
+                (_a = this.periodToggleEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.TOGGLE_BUTTON_SELECTOR).forEach((btn) => {
+                    const toggleBtn = btn;
+                    if (toggleBtn.label === "AM") {
+                        toggleBtn.checked = true;
+                    }
+                    else {
+                        toggleBtn.checked = false;
+                    }
+                });
+            }
             this.handleTimeChange(true);
             this.inputsInOrder.forEach((input) => {
                 input.classList.remove(this.FIT_TO_VALUE);
@@ -534,26 +718,31 @@ const TimeInput = class {
         };
         this.notifyScreenReaderSelectedTime = () => {
             if (this.selectedTime && this.selectedTimeInfoEl) {
+                let hours = this.selectedTime.getHours();
+                if (this.timePeriod === "12" && this.showAmPmToggle) {
+                    hours = this.convertTo24Hour(hours);
+                }
+                const hoursStr = hours.toString().padStart(2, "0");
+                const minutesStr = this.selectedTime
+                    .getMinutes()
+                    .toString()
+                    .padStart(2, "0");
+                const secondsStr = this.selectedTime
+                    .getSeconds()
+                    .toString()
+                    .padStart(2, "0");
+                const msStr = this.selectedTime
+                    .getMilliseconds()
+                    .toString()
+                    .padStart(3, "0");
                 if (this.isHHMMFormat()) {
-                    this.selectedTimeInfoEl.textContent = `Selected time: ${this.selectedTime
-                        .getHours()
-                        .toString()
-                        .padStart(2, "0")}:${this.selectedTime
-                        .getMinutes()
-                        .toString()
-                        .padStart(2, "0")}`;
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${hoursStr}:${minutesStr}`;
+                }
+                else if (!this.isSSSFormat()) {
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${hoursStr}:${minutesStr}:${secondsStr}`;
                 }
                 else {
-                    this.selectedTimeInfoEl.textContent = `Selected time: ${this.selectedTime
-                        .getHours()
-                        .toString()
-                        .padStart(2, "0")}:${this.selectedTime
-                        .getMinutes()
-                        .toString()
-                        .padStart(2, "0")}:${this.selectedTime
-                        .getSeconds()
-                        .toString()
-                        .padStart(2, "0")}`;
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${hoursStr}:${minutesStr}:${secondsStr}.${msStr}`;
                 }
             }
         };
@@ -571,7 +760,7 @@ const TimeInput = class {
         };
         this.handleHostFocus = () => {
             var _a, _b;
-            if ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.id.match(/(hour|minute|second)-input$/)) {
+            if ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.id.match(/(hour|minute|second|millisecond)-input$/)) {
                 this.removeLabelledBy = false;
             }
             else {
@@ -620,12 +809,17 @@ const TimeInput = class {
                 this.setInputValue(input);
             }
         };
-        this.convertToTime = (hour, minute, second) => {
+        this.convertToTime = (hour, minute, second, millisecond = null) => {
             if (!isEmptyString(hour) &&
                 !isEmptyString(minute) &&
-                (this.isHHMMFormat() || !isEmptyString(second))) {
+                (this.isHHMMFormat() || !isEmptyString(second)) &&
+                (!this.isSSSFormat() ||
+                    (millisecond !== null && !isEmptyString(millisecond)))) {
                 const d = new Date();
                 d.setHours(+hour, +minute, this.isHHMMFormat() ? 0 : +second, 0);
+                if (this.isSSSFormat() && millisecond !== null) {
+                    d.setMilliseconds(+millisecond);
+                }
                 return d;
             }
             else {
@@ -670,17 +864,22 @@ const TimeInput = class {
             (_d = this.inputCompContainerEl) === null || _d === void 0 ? void 0 : _d.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
         };
         this.getInputsInOrder = () => {
-            const timeParts = this.timeFormat.split(":");
+            const timeParts = this.timeFormat.split(/[:.]/);
             return timeParts.map((part) => {
-                switch (part.substring(0, 1)) {
-                    case "H":
+                switch (part) {
+                    case "HH":
                         return (h("input", { class: "hour-input", id: "hour-input", ref: (el) => (this.hourInputEl = el), "aria-label": "hour", placeholder: "HH", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventHourInput) }));
-                    case "M":
+                    case "MM":
                         return (h("input", { id: "minute-input", class: "minute-input", ref: (el) => (this.minuteInputEl = el), "aria-label": "minute", placeholder: "MM", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMinuteInput) }));
-                    case "S":
+                    case "SS":
                         if (!this.isHHMMFormat()) {
                             return (h("input", { id: "second-input", class: "second-input", ref: (el) => (this.secondInputEl = el), "aria-label": "second", placeholder: "SS", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventSecondInput) }));
                         }
+                        break;
+                    case "SSS":
+                        if (this.isSSSFormat()) {
+                            return (h("input", { id: "millisecond-input", class: "millisecond-input", ref: (el) => (this.millisecondInputEl = el), "aria-label": "millisecond", placeholder: "SSS", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMillisecondInput) }));
+                        }
                         return null;
                     default:
                         return null;
@@ -688,6 +887,9 @@ const TimeInput = class {
             });
         };
         this.getDescOfInputsOrder = () => {
+            if (this.isSSSFormat()) {
+                return "hour, minute, second, and millisecond";
+            }
             return "hour, minute, and second";
         };
         this.getScreenReaderInfo = (validationStatus) => {
@@ -727,7 +929,7 @@ const TimeInput = class {
                 this.removeLabelledBy = false;
                 return;
             }
-            if (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.id.match(/(minute|second)-input$/)) {
+            if (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.id.match(/(minute|second|millisecond)-input$/)) {
                 this.removeLabelledBy = false;
                 return;
             }
@@ -745,6 +947,18 @@ const TimeInput = class {
                     return value;
                 }
             }
+            else if (this.isSSSFormat()) {
+                if (/^\d{2}:\d{2}:\d{2}\.\d{1,3}$/.test(value)) {
+                    return value;
+                }
+                if (/^\d{2}:\d{2}:\d{2}\.\d{1,3}Z$/.test(value)) {
+                    return value.replace("Z", "");
+                }
+                const isoMatch = value.match(/T(\d{2}:\d{2}:\d{2}\.\d{1,3})/);
+                if (isoMatch) {
+                    return isoMatch[1];
+                }
+            }
             else {
                 if (/^\d{2}:\d{2}:\d{2}$/.test(value)) {
                     return value;
@@ -761,16 +975,78 @@ const TimeInput = class {
         };
         this.setPastedValueAndValidation = (isValidTime, pastedValue, event) => {
             if (isValidTime) {
-                const timeParts = isValidTime.split(":");
+                const timeParts = isValidTime.split(/[:.]/);
                 this.inputsInOrder.forEach((input, index) => {
+                    var _a, _b, _c, _d;
                     input.classList.add(this.FIT_TO_VALUE);
-                    const timeValue = timeParts[index] || "";
-                    input.value = timeValue.slice(0, 2);
+                    let timeValue = timeParts[index] || "";
+                    if (input === this.millisecondInputEl && this.isSSSFormat()) {
+                        timeValue = timeValue.slice(0, 3);
+                    }
+                    else {
+                        timeValue = timeValue.slice(0, 2);
+                    }
+                    if (input === this.hourInputEl) {
+                        let activeToggle;
+                        if (this.timePeriod === "12" && this.showAmPmToggle) {
+                            if (parseInt(timeValue) > 12) {
+                                timeValue = (parseInt(timeValue) - 12)
+                                    .toString()
+                                    .padStart(2, "0");
+                                if (parseInt(timeValue) > 12) {
+                                    return;
+                                }
+                                else {
+                                    this.period = "PM";
+                                    (_a = this.periodToggleEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.TOGGLE_BUTTON_SELECTOR).forEach((btn) => {
+                                        const toggleBtn = btn;
+                                        if (toggleBtn.label === "PM") {
+                                            activeToggle = toggleBtn;
+                                        }
+                                        else {
+                                            toggleBtn.checked = false;
+                                        }
+                                    });
+                                    if (activeToggle) {
+                                        (_b = this.periodToggleEl) === null || _b === void 0 ? void 0 : _b.setActiveToggle(activeToggle);
+                                        activeToggle.checked = true;
+                                    }
+                                    this.invalidTimeText = "";
+                                    this.validationStatus = "";
+                                }
+                            }
+                            else {
+                                if (parseInt(timeValue) === 0) {
+                                    timeValue = "12";
+                                }
+                                this.period = "AM";
+                                (_c = this.periodToggleEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll(this.TOGGLE_BUTTON_SELECTOR).forEach((btn) => {
+                                    const toggleBtn = btn;
+                                    if (toggleBtn.label === "AM") {
+                                        activeToggle = toggleBtn;
+                                    }
+                                    else {
+                                        toggleBtn.checked = false;
+                                    }
+                                });
+                                if (activeToggle) {
+                                    (_d = this.periodToggleEl) === null || _d === void 0 ? void 0 : _d.setActiveToggle(activeToggle);
+                                    activeToggle.checked = true;
+                                }
+                                this.invalidTimeText = "";
+                                this.validationStatus = "";
+                            }
+                        }
+                    }
+                    input.value = timeValue;
                     this.setInputValue(input);
                     this.autocompleteInput(input);
                 });
-                if (this.isHHMMFormat() && this.second !== "") {
+                if (this.isHHMMFormat() &&
+                    this.second !== "" &&
+                    this.millisecond !== "") {
                     this.second = "";
+                    this.millisecond = "";
                 }
             }
             else {
@@ -785,14 +1061,22 @@ const TimeInput = class {
                 }
             }
         };
+        this.handleAMPM = (selectedOption) => {
+            var _a;
+            this.period = selectedOption.label;
+            (_a = this.periodToggleEl) === null || _a === void 0 ? void 0 : _a.setActiveToggle(selectedOption);
+        };
     }
     watchInputHandler() {
         if (this.emitTimePartChange &&
             !this.externalSetTime &&
             !this.clearInput &&
-            !(this.hour && this.minute && this.second) &&
+            !(this.hour &&
+                this.minute &&
+                this.second &&
+                (this.isSSSFormat() ? this.millisecond : true)) &&
             this.selectedTime === null) {
-            this.emitIcChange(this.selectedTime);
+            this.emitIcTimeChange(this.selectedTime);
         }
     }
     watchDisabledHandler() {
@@ -803,10 +1087,10 @@ const TimeInput = class {
             this.helperText = this.defaultHelperText;
     }
     watchMaxHandler() {
-        this.maxTime = this.parseTime(this.max);
+        this.maxTime = parseTimeHelper(this.max).date;
     }
     watchMinHandler() {
-        this.minTime = this.parseTime(this.min);
+        this.minTime = parseTimeHelper(this.min).date;
     }
     watchRequiredHandler() {
         var _a, _b;
@@ -855,7 +1139,7 @@ const TimeInput = class {
                 input.classList.add(this.FIT_TO_VALUE);
             });
         }
-        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond);
+        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond, this.isValidMillisecond);
         if (this.value) {
             this.notifyScreenReaderSelectedTime();
         }
@@ -869,7 +1153,7 @@ const TimeInput = class {
     componentWillUpdate() {
         if (!this.isTimeSetFromKeyboardEvent)
             this.setTime(this.value);
-        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond);
+        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond, this.isValidMillisecond);
         this.handleTimeChange(false);
         this.isTimeSetFromKeyboardEvent = false;
     }
@@ -888,12 +1172,12 @@ const TimeInput = class {
         return this.selectedTime;
     }
     /**
-     * @internal Used to enable other components to invoke an IcChange event from the input.
+     * @internal Used to enable other components to invoke an icTimeChange event from the input.
      */
-    async triggerIcChange(t) {
+    async triggerIcTimeChange(t) {
         this.externalSetTime = true;
         this.setTime(t);
-        this.emitIcChange(t);
+        this.emitIcTimeChange(t);
         this.externalSetTime = false;
     }
     render() {
@@ -910,23 +1194,39 @@ const TimeInput = class {
             !(isEmptyString(this.hour) &&
                 isEmptyString(this.minute) &&
                 isEmptyString(this.second)));
-        return (h(Host, { key: 'b4330a85fcd6bf99ace98ba735759e0e98ebea69', class: {
+        if (this.showAmPmToggle && this.timePeriod !== "12") {
+            this.showAmPmToggle = false;
+        }
+        return (h(Host, { key: 'a9e366c7a8ed345fdbe3293191c0cab3e83341cb', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-time-input-disabled`]: disabled,
                 [`ic-time-input-${size}`]: true,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'e61ccf4dc81c26e14bf37e388aeb60fd25b4abd7', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '7bda8a8034ae7b80594341f6924d561abcbbab90', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'da6a06701686398f4a44b71e76db5d02da897631', name: "helper-text", slot: "helper-text" }))), h("span", { key: '62e88d54d2f445778e96be67949b1a82fc272955', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '0a80156ecc1ddf0dea39033cc78de875ab7fa532', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '09d36876b7dc4d8050bcb0e7d39a0b008bab4a12', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '6bb2743ce8c211b4500d707bf0a2ce10245dc31c', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '02a184415c1f445340b3d4a3097b28a79cd258fe', class: "input-container" }, h("div", { key: 'a68248f5ad7a134ebe73456268b6f9cf07a35afa', class: "time-inputs" }, [
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '32e07bf234275ab82cc4fb5cf52477d98b20ee56', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '76167c9c821ea70383f853f6247c8c33364063e9', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: '1d283d444c18e0395297d6bda0a2eff80a7ecbc7', name: "helper-text", slot: "helper-text" }))), h("span", { key: '8793da4aa61522afb9e4fb4c6fc3245b64afb111', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'a8ec036ff5eb8b030f843527ecf437504db61e43', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'b6a584ada9f2bd59350a528347df54faab176d90', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '22fdb36105184f0ac8bcbdcdb5a001ca75f24072', class: {
+                "with-am-pm-toggle": this.showAmPmToggle === true,
+            } }, h("ic-input-component-container", { key: 'b14252270fdada4256b78c6ae2d3a086650a2672', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'fba1548161f7bae290edce7cb4e11ced2aa6f306', class: "input-container" }, h("div", { key: 'edb256e2b99f6c2835f4044b5b8940e3a4d5548c', class: "time-inputs" }, [
             this.getInputsInOrder()[0],
             ":",
             this.getInputsInOrder()[1],
             !this.isHHMMFormat()
                 ? [":", this.getInputsInOrder()[2]]
                 : null,
-        ]), h("div", { key: '095391d922701f29a7debfd2482723fe05d1fdeb', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '8690a529f57705b60ecbc3122925557803197ed8', id: "clear-button", "aria-label": "Clear input", class: {
+            this.isSSSFormat()
+                ? [".", this.getInputsInOrder()[3]]
+                : null,
+        ]), h("div", { key: '7ce636fe859c10ac1bec25a3800c0c457ff66db2', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '52a844605b6d6feba6ed75dbdc8f13985764d77f', id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.hour) &&
                     isEmptyString(this.minute) &&
                     isEmptyString(this.second),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (h("div", { key: '83fe94cb9dc7b16f70049b36644d62f714e03c6f', class: "show-clock-button-wrapper" }, h("div", { key: '34171a16f8058ad79af9ac3bfeb9c2aea06c0c91', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: '3290691bc0e95d300e526052934efbc93e806e62', id: "clock-button", "aria-label": "Display clock", "aria-haspopup": "dialog", class: "clock-button", disabled: this.disabled, innerHTML: Clock, variant: "icon-tertiary", size: size, onFocus: this.handleClockFocus, onBlur: this.handleClockBlur, theme: this.clockFocused ? "light" : "dark" })))))), h("span", { key: 'b44af8625ff62cf77e8be3e88d62bcb411bd5dc0', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'a68f8dac81536f4f14302d7be6151a20c7e92024', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), h("ic-input-validation", { key: 'c152fd0a46420a430bb61f619dbbb395f1dd41cb', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (h("div", { key: '5d2973cc6faccd02ca824546d8b685abcb7e884b', class: "show-clock-button-wrapper" }, h("div", { key: '7dd67432231339d85e15d63d15f03776f607dbce', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: 'f1f6cdb97c9144a2d0d84431b3586be10c06dc47', id: "clock-button", "aria-label": "Display clock", "aria-haspopup": "dialog", class: "clock-button", disabled: this.disabled, innerHTML: Clock, variant: "icon-tertiary", size: size, onFocus: this.handleClockFocus, onBlur: this.handleClockBlur, theme: this.clockFocused ? "light" : "dark" })))))), this.showAmPmToggle && (h("ic-toggle-button-group", { key: 'cd635525ce0feb57ca71184c7bfe37bf31558322', "select-type": "single", "accessible-label": "AM PM Toggle", ref: (el) => (this.periodToggleEl = el), disabled: disabled, class: "am-pm-toggle", "select-method": "auto", onIcChange: (e) => this.handleAMPM(e.detail.selectedOption), onKeyDown: (e) => {
+                if (e.key === "Tab" && e.shiftKey) {
+                    e.preventDefault();
+                    if (this.inputsInOrder && this.inputsInOrder.length > 0) {
+                        const lastInput = this.inputsInOrder[this.inputsInOrder.length - 1];
+                        lastInput === null || lastInput === void 0 ? void 0 : lastInput.focus();
+                    }
+                }
+            } }, h("ic-toggle-button", { key: '7074ef3bed173ac1d7e2642f8d090af56eeca074', label: "AM", disabled: disabled, checked: true }), h("ic-toggle-button", { key: '157f7a6a165ded075516f8a6684c020c5cd1a0d5', label: "PM", disabled: disabled })))), h("span", { key: '6360d4f8c1aa62a2274ade9ffc4c76ea405f7189', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'd223325cc0be5c0666175259c892806c3d58840b', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), h("ic-input-validation", { key: '94b686791ab2684b955551b48e23b74fb3a8dcba', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -934,6 +1234,8 @@ const TimeInput = class {
         "hour": ["watchInputHandler"],
         "minute": ["watchInputHandler"],
         "second": ["watchInputHandler"],
+        "millisecond": ["watchInputHandler"],
+        "period": ["watchInputHandler"],
         "disabled": ["watchDisabledHandler"],
         "helperText": ["watchHelperTextHandler"],
         "max": ["watchMaxHandler"],