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

package/hydrate/index.js

@@ -5924,6 +5924,41 @@ const hasDynamicChildSlots = (mutationList, slotNames) => mutationList.some(({ t
 const renderDynamicChildSlots = (mutationList, slotNames, ref) => {
     if (hasDynamicChildSlots(mutationList, slotNames)) ;
 };
+/**
+ * Parses a time string (HH:MM or HH:MM:SS) or Date and returns both Date and time parts.
+ * @param value string or Date
+ * @returns { date: Date | null, parts: { hour: number, minute: number, second: number } | null }
+ */
+function parseTimeHelper(value) {
+    if (!value)
+        return { date: null, parts: null };
+    let d;
+    if (typeof value === "string") {
+        const parts = value.split(/[:.]/);
+        if (parts.length >= 2) {
+            d = new Date();
+            d.setHours(+parts[0], +parts[1], parts[2] ? +parts[2] : 0, parts[3] ? +parts[3] : 0);
+        }
+        else {
+            return { date: null, parts: null };
+        }
+    }
+    else if (value instanceof Date) {
+        d = value;
+    }
+    else {
+        return { date: null, parts: null };
+    }
+    return {
+        date: d,
+        parts: {
+            hour: d.getHours(),
+            minute: d.getMinutes(),
+            second: d.getSeconds(),
+            millisecond: d.getMilliseconds(),
+        },
+    };
+}
 
 const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, onSelectDay, selected, focussedDayRef, inRange, showDaysOutsideMonth, disableDay, }) => {
     const handleDayClick = () => {
@@ -6048,7 +6083,7 @@ const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear,
     return (hAsync("div", { class: "year-picker", role: "grid" }, thisDecade.map((years, yearIdx) => (hAsync("div", { class: "year-picker-row", role: "row", key: yearIdx }, years.map((yr, idx) => renderYearButton(yr, yearIdx, idx)))))));
 };
 
-const icCalendarCss = "/*! 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-date-picker-above) .calendar-container{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host(.ic-date-picker-calendar) .calendar-container{box-shadow:var(--ic-calendar-elevation)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-color:var(--ic-calendar-border);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-calendar-bg);z-index:var(--ic-z-index-calendar);box-sizing:border-box;margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.ic-calendar-small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.ic-calendar-large) .calendar-container{min-width:21rem;max-width:25.5rem}:host(.ic-calendar-large){--month-button-width:6.3125rem}:host(.ic-calendar-small){--month-button-width:6.25rem}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{display:flex;flex-direction:column;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.ic-calendar-small) .month-picker,:host(.ic-calendar-small) .year-picker{width:13.125rem}:host(.ic-calendar-large) .month-picker,:host(.ic-calendar-large) .year-picker{width:20rem}:host .month-picker .month-picker-row,:host .year-picker .year-picker-row{display:inline-grid;grid-template-columns:repeat(3, minmax(0, 1fr));width:100%;gap:var(--ic-space-xs)}:host(.ic-calendar-small) .month-picker .month-picker-row,:host(.ic-calendar-small) .year-picker .year-picker-row{grid-template-columns:repeat(2, minmax(0, 1fr))}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width);padding:var(--ic-space-xs) auto}:host .prev-decade.year-button svg{margin-right:calc(-1 * var(--ic-space-xs));--icon-width:var(--ic-space-md);--icon-height:var(--ic-space-md)}:host(.ic-calendar-small) .prev-decade.year-button svg{margin-right:calc(-1 * calc(var(--ic-space-md) + var(--ic-space-1px)))}:host(.ic-calendar-large) .prev-decade.year-button svg{margin-right:calc(-1 * calc(var(--ic-space-md) + var(--ic-space-xxs)))}:host .prev-decade.year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg);gap:var(--ic-space-xxxs);display:inline-grid;grid-template-columns:1.5rem 1fr}:host(.ic-calendar-small) .prev-decade.year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade.year-button svg{margin-left:calc(-1 * var(--ic-space-lg));--icon-width:var(--ic-space-md);--icon-height:var(--ic-space-md)}:host(.ic-calendar-small) .next-decade.year-button svg,:host(.ic-calendar-large) .next-decade.year-button svg{margin-left:calc(\n    -1 * (var(--ic-space-lg) + var(--ic-space-xs) + var(--ic-space-1px))\n  )}:host .next-decade.year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg);gap:var(--ic-space-xxxs);display:inline-grid;grid-template-columns:1fr 1.5rem}:host(.ic-calendar-small) .next-decade.year-button::part(button),:host(.ic-calendar-large) .next-decade.year-button::part(button){padding-left:calc(var(--ic-space-xl) - var(--ic-space-xxs))}:host .bottom-buttons{display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-calendar-large) .calendar{width:19.25rem}:host(.ic-calendar-small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays-container{display:flex;align-self:stretch}:host .weekdays{display:flex;flex-grow:1;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs)}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0;min-height:16rem;align-content:flex-start}:host(.ic-calendar-small) .calendar-days-container{padding:var(--ic-space-xxxs) 0;min-height:14.5rem}:host(.ic-calendar-large) .calendar-days-container{padding:var(--ic-space-xs) 0;min-height:17.5rem}:host .calendar-days-container tr{display:flex;flex-grow:1;justify-content:space-between;border-spacing:0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center;color:var(--ic-typography-color, var(--ic-color-text-primary));--ic-typography-color:var(--ic-calendar-label);text-align:center;font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-calendar-large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.ic-calendar-small) .day-button-container{width:2rem;height:2rem}:host(.ic-calendar-large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-calendar-bg);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.ic-calendar-large) .day-button{width:2.25rem;height:2.25rem}:host(.ic-calendar-small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;--ic-typography-color:var(--ic-calendar-date-label-default)}:host .day-button.outside-range ic-typography{--ic-typography-color:var(--ic-calendar-date-label-disabled)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{--ic-typography-color:var(--ic-calendar-date-label-default)}:host .day-button:hover:not(.disabled){background-color:var(--ic-calendar-date-default-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-calendar-date-default-bg-pressed)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-calendar-date-active-bg-default)}:host .day-button.selected ic-typography{--ic-typography-color:var(--ic-calendar-date-label-selected)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-calendar-date-active-bg-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-calendar-date-active-bg-pressed)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-calendar-default-underline)}:host(.ic-calendar-small) .day-button.today::after{bottom:0.35rem}:host(.ic-calendar-large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-calendar-selected-underline)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-border-hc)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
+const icCalendarCss = "/*! 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-date-picker-above) .calendar-container{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host(.ic-date-picker-calendar) .calendar-container{position:absolute;min-width:19rem;max-width:23.5rem;width:var(--input-width);margin-top:var(--ic-space-xxxs);animation:fade-in-calendar var(--ic-transition-duration-slow);box-shadow:var(--ic-calendar-elevation)}:host .calendar-container{display:flex;flex-direction:column;gap:var(--ic-space-xs);width:-moz-fit-content;width:fit-content;border:var(--ic-border-default);border-color:var(--ic-calendar-border);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-calendar-bg);z-index:var(--ic-z-index-calendar);box-sizing:border-box;padding:var(--ic-space-xs)}:host(.ic-calendar-small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.ic-calendar-large) .calendar-container{min-width:21rem;max-width:25.5rem}:host(.ic-calendar-large){--month-button-width:6.3125rem}:host(.ic-calendar-small){--month-button-width:6.25rem}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{display:flex;flex-direction:column;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.ic-calendar-small) .month-picker,:host(.ic-calendar-small) .year-picker{width:13.125rem}:host(.ic-calendar-large) .month-picker,:host(.ic-calendar-large) .year-picker{width:20rem}:host .month-picker .month-picker-row,:host .year-picker .year-picker-row{display:inline-grid;grid-template-columns:repeat(3, minmax(0, 1fr));width:100%;gap:var(--ic-space-xs)}:host(.ic-calendar-small) .month-picker .month-picker-row,:host(.ic-calendar-small) .year-picker .year-picker-row{grid-template-columns:repeat(2, minmax(0, 1fr))}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width);padding:var(--ic-space-xs) auto}:host .prev-decade.year-button svg{margin-right:calc(-1 * var(--ic-space-xs));--icon-width:var(--ic-space-md);--icon-height:var(--ic-space-md)}:host(.ic-calendar-small) .prev-decade.year-button svg{margin-right:calc(-1 * calc(var(--ic-space-md) + var(--ic-space-1px)))}:host(.ic-calendar-large) .prev-decade.year-button svg{margin-right:calc(-1 * calc(var(--ic-space-md) + var(--ic-space-xxs)))}:host .prev-decade.year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg);gap:var(--ic-space-xxxs);display:inline-grid;grid-template-columns:1.5rem 1fr}:host(.ic-calendar-small) .prev-decade.year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade.year-button svg{margin-left:calc(-1 * var(--ic-space-lg));--icon-width:var(--ic-space-md);--icon-height:var(--ic-space-md)}:host(.ic-calendar-small) .next-decade.year-button svg,:host(.ic-calendar-large) .next-decade.year-button svg{margin-left:calc(\n    -1 * (var(--ic-space-lg) + var(--ic-space-xs) + var(--ic-space-1px))\n  )}:host .next-decade.year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg);gap:var(--ic-space-xxxs);display:inline-grid;grid-template-columns:1fr 1.5rem}:host(.ic-calendar-small) .next-decade.year-button::part(button),:host(.ic-calendar-large) .next-decade.year-button::part(button){padding-left:calc(var(--ic-space-xl) - var(--ic-space-xxs))}:host .bottom-buttons{display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-calendar-large) .calendar{width:19.25rem}:host(.ic-calendar-small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays-container{display:flex;align-self:stretch}:host .weekdays{display:flex;flex-grow:1;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs)}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0;min-height:16rem;align-content:flex-start}:host(.ic-calendar-small) .calendar-days-container{padding:var(--ic-space-xxxs) 0;min-height:14.5rem}:host(.ic-calendar-large) .calendar-days-container{padding:var(--ic-space-xs) 0;min-height:17.5rem}:host .calendar-days-container tr{display:flex;flex-grow:1;justify-content:space-between;border-spacing:0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center;color:var(--ic-typography-color, var(--ic-color-text-primary));--ic-typography-color:var(--ic-calendar-label);text-align:center;font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-calendar-large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.ic-calendar-small) .day-button-container{width:2rem;height:2rem}:host(.ic-calendar-large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-calendar-bg);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.ic-calendar-large) .day-button{width:2.25rem;height:2.25rem}:host(.ic-calendar-small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;--ic-typography-color:var(--ic-calendar-date-label-default)}:host .day-button.outside-range ic-typography{--ic-typography-color:var(--ic-calendar-date-label-disabled)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{--ic-typography-color:var(--ic-calendar-date-label-default)}:host .day-button:hover:not(.disabled){background-color:var(--ic-calendar-date-default-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-calendar-date-default-bg-pressed)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-calendar-date-active-bg-default)}:host .day-button.selected ic-typography{--ic-typography-color:var(--ic-calendar-date-label-selected)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-calendar-date-active-bg-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-calendar-date-active-bg-pressed)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-calendar-default-underline)}:host(.ic-calendar-small) .day-button.today::after{bottom:0.35rem}:host(.ic-calendar-large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-calendar-selected-underline)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-border-hc)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
 var IcCalendarStyle0 = icCalendarCss;
 
 const FOCUS_TIMER = 100;
@@ -10128,6 +10163,9 @@ class DataTable {
                 if (columnWidth.maxWidth) {
                     columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth.maxWidth });
                 }
+                if (columnWidth.width) {
+                    columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth.width });
+                }
             }
             return columnWidthStyling;
         };
@@ -10926,26 +10964,26 @@ class DataTable {
                 ? "deselect all"
                 : "select all remaining"
             : "select all";
-        return (hAsync(Host, { key: '9f183b318d949b1342869be9193cdff5fed88d2f', style: Object.assign({}, this.setTableDimensions()), class: {
+        return (hAsync(Host, { key: '5a54a8292fc31e31e968c76b21f957d6ed4665bb', style: Object.assign({}, this.setTableDimensions()), class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-data-table-show-pagination`]: !!showPagination,
                 [`ic-data-table-embedded`]: !!embedded,
-            } }, hAsync("div", { key: '67ed81b3d232c0126317900dabba13b24a06946f', class: "table-container" }, isSlotUsed(this.el, "title-bar") && hAsync("slot", { key: 'd2543f5ac57d62ade8d1651c2285b6bf7a31f12f', name: "title-bar" }), hAsync("div", { key: '875654c430a0d216061249dbaa1674b8073250e2', class: {
+            } }, hAsync("div", { key: '664f9b13c5c5f9b2a0323a870b7c96cfc8e2c45d', class: "table-container" }, isSlotUsed(this.el, "title-bar") && hAsync("slot", { key: '997ec993032c647aea11da288c2f2b19c5f69f8b', name: "title-bar" }), hAsync("div", { key: '35823b8f7cfeeaeab64dc248ef65c6c52762cf03', class: {
                 ["table-row-container"]: true,
                 scrollable,
-            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, hAsync("table", { key: 'e3f2659b9fe5f091525a949ccb955da9d633afe7', style: {
+            }, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, hAsync("table", { key: '9b9c1bbf6ebcc08ca235f2637c95dc74bd49c3a1', style: {
                 "--table-layout": tableLayout,
-            } }, hAsync("caption", { key: 'e841f03366a519a9f22a2e9385e3085b9db63201', class: "table-caption" }, caption), !hideColumnHeaders && (hAsync("thead", { key: '51f0415b666ac119c08ba3a7ef2223547bd55ae3', class: {
+            } }, hAsync("caption", { key: 'f5acadc8976d3b474dab6d17c957553a384c348a', class: "table-caption" }, caption), !hideColumnHeaders && (hAsync("thead", { key: '4131acaa910add9c3f596f34c879b539e69e4c69', class: {
                 ["column-header-sticky"]: stickyColumnHeaders,
                 ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
-            } }, hAsync("tr", { key: '0694725f5af74c8173371365e72c7670b8a0e0ac' }, rowSelection && data && (hAsync("th", { key: '6c93c841bab80011f41397363d69172d62f2f11d', class: {
+            } }, hAsync("tr", { key: 'ddf0b02e09b404800f07b86709812a8c719da333' }, rowSelection && data && (hAsync("th", { key: '3aa7cb15d490ea90a1c33959ff83987b244951f4', class: {
                 "column-header": true,
                 "checkbox-cell": true,
                 "updating-state-headers": updating && !loading,
                 [`table-density-${density}`]: this.notDefaultDensity(),
-            } }, hAsync("div", { key: 'c97ccb8ac9acfea3f948606f3fbb699d15a142b6', class: "checkbox-wrapper" }, hAsync("ic-checkbox", { key: '6973d631e63e183ecd21c7ca645206966ae95c5b', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
+            } }, hAsync("div", { key: '0b42136651692a5b69131dc40eb80636e0cb5ff1', class: "checkbox-wrapper" }, hAsync("ic-checkbox", { key: 'be47f6ce2b9c6450b4fff5bba46686396fbf7bab', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
             !loading &&
-            (hideColumnHeaders ? (hAsync("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), hAsync("div", { key: 'd55e2139c46b6fd77fa4d09e8a1a2308912d2027', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (hAsync("div", { key: '6d65f7399346a04d4c050a569b5a716a1374bcc9', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (hAsync("slot", { name: "pagination-bar" })) : (hAsync("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideCurrentPage: paginationBarOptions.hideCurrentPage, hideFirstAndLastPageButton: paginationBarOptions.hideFirstAndLastPageButton, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (hAsync("div", { key: '2c4efdb9a3b0a8a775600c6763961e0ee431cf86', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            (hideColumnHeaders ? (hAsync("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), hAsync("div", { key: '23b30f12641186e93d7c20cee3b302d002f799cc', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (hAsync("div", { key: '639f16bbcb3ee28acd812e753ad242bdfc9fda24', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (hAsync("slot", { name: "pagination-bar" })) : (hAsync("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideCurrentPage: paginationBarOptions.hideCurrentPage, hideFirstAndLastPageButton: paginationBarOptions.hideFirstAndLastPageButton, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, selectItemsPerPageOnEnter: paginationBarOptions.selectItemsPerPageOnEnter, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (hAsync("div", { key: 'fdd6bfc99732ce13c66e322f91630bb02e23fd1b', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
                 sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
@@ -11086,7 +11124,7 @@ class DataTableTitleBar {
     }; }
 }
 
-var Clear$1 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+var Clear$2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
 </svg>
 `;
@@ -12278,7 +12316,7 @@ class DateInput {
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear$1, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (hAsync("div", { key: 'ec2f995db607ae5d575ddd7994e85f4b883ce2bb', class: "show-calendar-button-wrapper" }, hAsync("div", { key: '74e895071ab608fcccc0a3e2b2ec368511efe4d3', class: { divider: true, [size]: true } }), hAsync("ic-button", { key: '51e8939da851ae18809840d22492f3b5be958b26', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), hAsync("span", { key: '77d360d10492577650304e7914021ad40bb8b281', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { key: '1c285045fb1b18bca93c9e32956e93b8d400b0a1', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), hAsync("ic-input-validation", { key: '7f02c2d9ec754c92dec3156339e6ea6b504b8d74', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, disabled: this.disabled, innerHTML: Clear$2, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (hAsync("div", { key: 'ec2f995db607ae5d575ddd7994e85f4b883ce2bb', class: "show-calendar-button-wrapper" }, hAsync("div", { key: '74e895071ab608fcccc0a3e2b2ec368511efe4d3', class: { divider: true, [size]: true } }), hAsync("ic-button", { key: '51e8939da851ae18809840d22492f3b5be958b26', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), hAsync("span", { key: '77d360d10492577650304e7914021ad40bb8b281', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { key: '1c285045fb1b18bca93c9e32956e93b8d400b0a1', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), hAsync("ic-input-validation", { key: '7f02c2d9ec754c92dec3156339e6ea6b504b8d74', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -18906,6 +18944,10 @@ class Pagination {
         this.midItems = [];
         this.startEllipsis = false;
         this.startItems = [];
+        /**
+         * The accessible label of the pagination component to provide context for screen reader users.
+         */
+        this.accessibleLabel = "Pagination Navigation";
         /**
          * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
@@ -19136,14 +19178,14 @@ class Pagination {
     }
     render() {
         const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (hAsync(Host, { key: '9f9c0ceb1629ebff96c677d7b4ad9995bbe480cd', class: {
+        return (hAsync(Host, { key: '206014fa2aa2c61bb9535e4de4fa5bf756bd318c', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (hAsync("nav", { key: '4d24ed30438c6755a1717454ee83e2a1b58d93c5', class: {
+            } }, type === "simple" && (hAsync("nav", { key: '8544b88d593c806867e0bd49cb0624a684dec271', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), hAsync("ic-pagination-item", { key: '784f99d1fa32d4f48c6de793707825333e45651a', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (hAsync("nav", { key: 'ce6061fcee8e202cb895e2919525b64c6a1c1114', class: {
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), hAsync("ic-pagination-item", { key: '5331aca30709281171cf19f17c2f05a0d0cdf168', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (hAsync("nav", { key: '6b7acef9da08b590b941a7ce142ce448dbf79ff2', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (hAsync("span", { key: '4980f1fd9ebd31a5b8835876479e12a8a0f5d54d', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (hAsync("span", { key: 'e60f3fb36b78e7970f14836295efbd3a1f481885', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19159,6 +19201,7 @@ class Pagination {
         "$flags$": 9,
         "$tagName$": "ic-pagination",
         "$members$": {
+            "accessibleLabel": [1, "accessible-label"],
             "adjacentPageCount": [1026, "adjacent-page-count"],
             "boundaryPageCount": [1026, "boundary-page-count"],
             "defaultPage": [2, "default-page"],
@@ -19201,6 +19244,10 @@ class PaginationBar {
         this.itemsPerPageString = "10";
         this.lowerBound = 1;
         this.paginationWrapped = false;
+        /**
+         * The accessible label passed down to the pagination component to provide context for screen reader users.
+         */
+        this.accessibleLabel = "Pagination Navigation";
         /**
          * Sets the alignment of the items in the pagination bar.
          */
@@ -19528,22 +19575,22 @@ class PaginationBar {
         this.changePage(page);
     }
     render() {
-        const { alignment, displayedItemsPerPageOptions, PAGE_INPUT_FIELD_ID, type, rangeLabelType, hideRangeLabel, showItemsPerPageControl, showGoToPageControl, pageLabel, capitalizedPageLabel, lowerCasePageLabel, capitalizedItemLabel, lowerCaseItemLabel, totalPages, activePage, itemsPerPageString, theme, monochrome, selectItemsPerPageOnEnter, hideCurrentPage, hideFirstAndLastPageButton, } = this;
-        return (hAsync(Host, { key: '9e58353122e7c4d900d8e05557b1ad455318193e', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, hAsync("div", { key: '3b321296452318c0d4e6c6127de6c585d1685b79', class: {
+        const { accessibleLabel, alignment, displayedItemsPerPageOptions, PAGE_INPUT_FIELD_ID, type, rangeLabelType, hideRangeLabel, showItemsPerPageControl, showGoToPageControl, pageLabel, capitalizedPageLabel, lowerCasePageLabel, capitalizedItemLabel, lowerCaseItemLabel, totalPages, activePage, itemsPerPageString, theme, monochrome, selectItemsPerPageOnEnter, hideCurrentPage, hideFirstAndLastPageButton, } = this;
+        return (hAsync(Host, { key: 'b4156a3e8ea25f4e3c63b6806a132998acc4d413', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, hAsync("div", { key: 'cdbb0088e57c64438cdf78d82a09f022321a6e79', class: {
                 ["pagination-bar"]: true,
                 [`pagination-bar-${alignment}`]: true,
-            }, ref: (el) => (this.paginationBarEl = el) }, (!hideRangeLabel || showItemsPerPageControl) && (hAsync("div", { key: '9d848e5c743b0e175147b69ad6c347fe9501d949', class: "item-controls" }, showItemsPerPageControl && (hAsync("div", { key: '52783c5fc011c45d55801d0b2154bc9a087a004b', class: "items-per-page-holder" }, hAsync("ic-typography", { key: '6b819e980dad965c28db3d0aaa7b6a898d162d69', class: {
+            }, ref: (el) => (this.paginationBarEl = el) }, (!hideRangeLabel || showItemsPerPageControl) && (hAsync("div", { key: '2ca590958c60e8e01b77e8f8ed09e7fa8dd91557', class: "item-controls" }, showItemsPerPageControl && (hAsync("div", { key: '4fc26efe806e4897e305842dcc47d81180364698', class: "items-per-page-holder" }, hAsync("ic-typography", { key: 'eb35b4a2a49a249584532042647a02aaadd4c9b6', class: {
                 ["items-per-page-control-label"]: true,
-            }, variant: "label", onClick: this.itemsPerPageLabelClickHandler }, capitalizedItemLabel, "s per ", lowerCasePageLabel), hAsync("ic-select", { key: '971399bcdf27a530f80520819c271e9038066581', theme: theme, size: "small", label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: displayedItemsPerPageOptions, selectOnEnter: selectItemsPerPageOnEnter, value: itemsPerPageString, onIcChange: this.changeItemsPerPage, ref: (el) => (this.pageDropdownEl = el) }))), !hideRangeLabel &&
+            }, variant: "label", onClick: this.itemsPerPageLabelClickHandler }, capitalizedItemLabel, "s per ", lowerCasePageLabel), hAsync("ic-select", { key: 'f8541624bc0a7121cac0dce4e49392c6ad85e819', theme: theme, size: "small", label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: displayedItemsPerPageOptions, selectOnEnter: selectItemsPerPageOnEnter, value: itemsPerPageString, onIcChange: this.changeItemsPerPage, ref: (el) => (this.pageDropdownEl = el) }))), !hideRangeLabel &&
             (rangeLabelType === "data" ? (hAsync("ic-typography", { class: {
                     ["item-pagination-label"]: true,
                 }, variant: "label", "aria-live": "polite" }, this.upperBound === 0 && `0 ${lowerCaseItemLabel}s`, this.upperBound > 0 &&
                 `${this.lowerBound} - ${this.upperBound} of ${this.totalItems} ${lowerCaseItemLabel}${this.totalItems > 1 ? "s" : ""}`)) : (hAsync("ic-typography", { class: {
                     ["page-pagination-label"]: true,
-                }, variant: "label", "aria-live": "polite" }, capitalizedPageLabel, " ", activePage, " of ", totalPages))))), hAsync("div", { key: '9b488eaf711d15286be92a4b367d02f7e225a0c3', class: {
+                }, variant: "label", "aria-live": "polite" }, capitalizedPageLabel, " ", activePage, " of ", totalPages))))), hAsync("div", { key: 'a781f60abd8da11927f5e3686926113f638936ad', class: {
                 ["pagination-controls"]: true,
                 ["pagination-controls-wrap"]: this.paginationWrapped,
-            } }, hAsync("div", { key: '22cba9694627e35900b6847697360a5924ad0518', class: "pagination-holder" }, hAsync("ic-pagination", { key: '1c397720f1637f856e9bed188ff53b07fff24bea', type: type, pages: totalPages, label: pageLabel, ref: (el) => (this.paginationEl = el), currentPage: activePage, theme: theme, monochrome: monochrome, hideCurrentPage: hideCurrentPage, hideFirstAndLastPageButton: hideFirstAndLastPageButton })), showGoToPageControl && (hAsync("div", { key: '0fea3a086dbcbad5e01cf79808b678d2357c12bf', class: "go-to-page-holder" }, hAsync("ic-typography", { key: 'e8f93eeb864821e80f735dcdbd56ec02cde8bbda', variant: "label", onClick: this.goToPageLabelClickHandler }, "Go to ", lowerCasePageLabel), hAsync("ic-tooltip", { key: 'ca276acfeddd757806772b9ffa7207ba1208e08d', label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true, ref: (el) => (this.pageInputTooltipEl = el) }, hAsync("ic-text-field", { key: 'f5b56075402822ebd8bad42bf21b2bbb2e6b2e12', theme: theme, type: "number", size: "small", label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: this.handleKeydown, onKeyUp: this.handleKeyUp, onInput: this.handleInputChange, max: totalPages, min: "1", validationInlineInternal: true, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: (el) => (this.pageInputEl = el) })), hAsync("ic-button", { key: '021bb44718fb00a03bddb167ba4f878b06776973', variant: "secondary", onClick: this.goToPage, size: "small", class: "go-to-page-button" }, "Go")))))));
+            } }, hAsync("div", { key: 'eb1dd49fe13eaa7358fadd76e7b7fe552f3e3fe1', class: "pagination-holder" }, hAsync("ic-pagination", { key: '717308c1d004d129c56d2b37ecf6ea207bdd1bc5', accessibleLabel: accessibleLabel, type: type, pages: totalPages, label: pageLabel, ref: (el) => (this.paginationEl = el), currentPage: activePage, theme: theme, monochrome: monochrome, hideCurrentPage: hideCurrentPage, hideFirstAndLastPageButton: hideFirstAndLastPageButton })), showGoToPageControl && (hAsync("div", { key: 'f13fda5cee5728bf3c35ba480a96437416a66721', class: "go-to-page-holder" }, hAsync("ic-typography", { key: 'd33e0a8d6ccbde4f5b44d2cdac54eac4288cf2de', variant: "label", onClick: this.goToPageLabelClickHandler }, "Go to ", lowerCasePageLabel), hAsync("ic-tooltip", { key: '6a6d2d300dbb3419313775fec483f5580bf45add', label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true, ref: (el) => (this.pageInputTooltipEl = el) }, hAsync("ic-text-field", { key: '94b9d3cb57ca5141392827b81006267e44358473', theme: theme, type: "number", size: "small", label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: this.handleKeydown, onKeyUp: this.handleKeyUp, onInput: this.handleInputChange, max: totalPages, min: "1", validationInlineInternal: true, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: (el) => (this.pageInputEl = el) })), hAsync("ic-button", { key: 'e6b3a97814c0af73c289f46b9c797efdfd3702e2', variant: "secondary", onClick: this.goToPage, size: "small", class: "go-to-page-button" }, "Go")))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19560,6 +19607,7 @@ class PaginationBar {
         "$flags$": 9,
         "$tagName$": "ic-pagination-bar",
         "$members$": {
+            "accessibleLabel": [1, "accessible-label"],
             "alignment": [1],
             "currentPage": [2, "current-page"],
             "selectedItemsPerPage": [2, "selected-items-per-page"],
@@ -21169,7 +21217,7 @@ var Expand = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 </svg>
 `;
 
-var Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+var Clear$1 = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6666 4.27334L11.7266 3.33334L7.99998 7.06001L4.27331 3.33334L3.33331 4.27334L7.05998 8.00001L3.33331 11.7267L4.27331 12.6667L7.99998 8.94001L11.7266 12.6667L12.6666 11.7267L8.93998 8.00001L12.6666 4.27334Z" fill="currentColor" />
 </svg>
 `;
@@ -21991,7 +22039,7 @@ class Select {
             }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: inputId, value: searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: form }), isClearable && (hAsync("div", { class: "clear-button-container" }, hAsync("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": searchableSelectInputValue &&
                 (currValue === null || loading)
                 ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), hAsync("div", { class: "divider" }))), hAsync("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
+                : "Clear selection", class: "clear-button", innerHTML: Clear$1, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), hAsync("div", { class: "divider" }))), hAsync("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
             }, innerHTML: Expand, "aria-hidden": "true" }), hAsync("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (hAsync("div", { class: "select-container" }, hAsync("button", { role: "combobox", class: "select-input", ref: (el) => (this.customSelectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && currValue
@@ -22005,7 +22053,7 @@ class Select {
             } }, valueLabelString || placeholder), hAsync("div", { class: "select-input-end" }, isClearable && hAsync("div", { class: "divider" }), hAsync("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (hAsync("ic-menu", { key: 'b56cf5adc26838ad0f873aa16df8da7fd7b83d22', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear$1, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (hAsync("ic-menu", { key: 'b56cf5adc26838ad0f873aa16df8da7fd7b83d22', class: {
                 "no-results": loading ||
                     hasTimedOut ||
                     (searchable &&
@@ -24798,7 +24846,7 @@ class Theme {
 
 var 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}}";
 var IcTimeInputStyle0 = icTimeInputCss;
 
 let inputIds = 0;
@@ -24810,9 +24858,10 @@ class TimeInput {
         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";
@@ -24823,6 +24872,7 @@ class TimeInput {
         this.isValidHour = true;
         this.isValidMinute = true;
         this.isValidSecond = true;
+        this.isValidMillisecond = true;
         this.isValidTime = true;
         this.isTimeSetFromKeyboardEvent = false;
         this.previousSelectedTime = null;
@@ -24831,12 +24881,20 @@ class TimeInput {
         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.
          */
@@ -24846,7 +24904,7 @@ class TimeInput {
          */
         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;
         /**
@@ -24881,6 +24939,10 @@ class TimeInput {
          * 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.
          */
@@ -24928,19 +24990,6 @@ class TimeInput {
                 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 ||
@@ -24968,9 +25017,22 @@ class TimeInput {
                 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) => {
@@ -24984,6 +25046,9 @@ class TimeInput {
             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) => {
@@ -24996,22 +25061,50 @@ class TimeInput {
             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) {
@@ -25020,18 +25113,25 @@ class TimeInput {
                             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;
@@ -25061,6 +25161,7 @@ class TimeInput {
             if (!(this.isValidHour &&
                 this.isValidMinute &&
                 this.isValidSecond &&
+                this.isValidMillisecond &&
                 this.isValidTime)) {
                 this.invalidTimeText = outOfBoundsMsg || this.invalidTimeMessage;
             }
@@ -25072,12 +25173,33 @@ class TimeInput {
             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 &&
@@ -25110,6 +25232,12 @@ class TimeInput {
                 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) {
@@ -25123,18 +25251,25 @@ class TimeInput {
                     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) &&
@@ -25172,7 +25307,18 @@ class TimeInput {
         };
         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);
             }
         };
@@ -25228,20 +25374,80 @@ class TimeInput {
         };
         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) {
@@ -25251,6 +25457,8 @@ class TimeInput {
                     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);
@@ -25266,22 +25474,26 @@ class TimeInput {
                         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);
@@ -25295,7 +25507,10 @@ class TimeInput {
                 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");
                     });
@@ -25303,6 +25518,7 @@ class TimeInput {
             }
         };
         this.handleClear = () => {
+            var _a;
             this.clearInput = true;
             if (this.hourInputEl) {
                 this.hourInputEl.value = "";
@@ -25313,9 +25529,25 @@ class TimeInput {
             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);
@@ -25331,26 +25563,31 @@ class TimeInput {
         };
         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}`;
                 }
             }
         };
@@ -25368,7 +25605,7 @@ class TimeInput {
         };
         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 {
@@ -25417,12 +25654,17 @@ class TimeInput {
                 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 {
@@ -25467,17 +25709,22 @@ class TimeInput {
             (_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 (hAsync("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 (hAsync("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 (hAsync("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 (hAsync("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;
@@ -25485,6 +25732,9 @@ class TimeInput {
             });
         };
         this.getDescOfInputsOrder = () => {
+            if (this.isSSSFormat()) {
+                return "hour, minute, second, and millisecond";
+            }
             return "hour, minute, and second";
         };
         this.getScreenReaderInfo = (validationStatus) => {
@@ -25524,7 +25774,7 @@ class TimeInput {
                 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;
             }
@@ -25542,6 +25792,18 @@ class TimeInput {
                     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;
@@ -25558,16 +25820,78 @@ class TimeInput {
         };
         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 {
@@ -25582,14 +25906,22 @@ class TimeInput {
                 }
             }
         };
+        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() {
@@ -25600,10 +25932,10 @@ class TimeInput {
             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;
@@ -25652,7 +25984,7 @@ class TimeInput {
                 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();
         }
@@ -25666,7 +25998,7 @@ class TimeInput {
     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;
     }
@@ -25685,12 +26017,12 @@ class TimeInput {
         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() {
@@ -25707,23 +26039,39 @@ class TimeInput {
             !(isEmptyString(this.hour) &&
                 isEmptyString(this.minute) &&
                 isEmptyString(this.second)));
-        return (hAsync(Host, { key: 'b4330a85fcd6bf99ace98ba735759e0e98ebea69', class: {
+        if (this.showAmPmToggle && this.timePeriod !== "12") {
+            this.showAmPmToggle = false;
+        }
+        return (hAsync(Host, { key: 'd005982324084fad9fdfe6392cf879e15709d2ef', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-time-input-disabled`]: disabled,
                 [`ic-time-input-${size}`]: true,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { key: 'e61ccf4dc81c26e14bf37e388aeb60fd25b4abd7', disabled: disabled }, !(hideLabel && hideHelperText) && (hAsync("ic-input-label", { key: '7bda8a8034ae7b80594341f6924d561abcbbab90', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, hAsync("slot", { key: 'da6a06701686398f4a44b71e76db5d02da897631', name: "helper-text", slot: "helper-text" }))), hAsync("span", { key: '62e88d54d2f445778e96be67949b1a82fc272955', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), hAsync("span", { key: '0a80156ecc1ddf0dea39033cc78de875ab7fa532', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { key: '09d36876b7dc4d8050bcb0e7d39a0b008bab4a12', id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("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" } }, hAsync("div", { key: '02a184415c1f445340b3d4a3097b28a79cd258fe', class: "input-container" }, hAsync("div", { key: 'a68248f5ad7a134ebe73456268b6f9cf07a35afa', class: "time-inputs" }, [
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { key: '6fcc48d72a92ef2a0acf3f6b109e29b24c6608db', disabled: disabled }, !(hideLabel && hideHelperText) && (hAsync("ic-input-label", { key: '84364f527bbfeffed22d95df1ce879bb9cb55fde', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, hAsync("slot", { key: '4a993ddc9a3923e4fbe58f4abfd1d6f51ef63494', name: "helper-text", slot: "helper-text" }))), hAsync("span", { key: 'de2889971bef74376661a3fb0963c9bc88673e12', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), hAsync("span", { key: 'b68b686d6794d6ad1247f18c867b1652066b48da', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { key: '56557e76da321f937be614926cd3f41b4c9a09a8', id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("div", { key: '89cbb13ffe21d66fd82a28ad6b5b295cf68c5787', class: {
+                "with-am-pm-toggle": this.showAmPmToggle === true,
+            } }, hAsync("ic-input-component-container", { key: '03a61c8d72f43d68f81069327aa31b632bfee74d', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, hAsync("div", { key: '0fdf9d4191272a8b53e73d6230e10750032d5279', class: "input-container" }, hAsync("div", { key: 'c7b13f330ec67b48e817f4b87fff96ad6ad6102e', class: "time-inputs" }, [
             this.getInputsInOrder()[0],
             ":",
             this.getInputsInOrder()[1],
             !this.isHHMMFormat()
                 ? [":", this.getInputsInOrder()[2]]
                 : null,
-        ]), hAsync("div", { key: '095391d922701f29a7debfd2482723fe05d1fdeb', class: "action-buttons" }, showClearButton && (hAsync("ic-button", { key: '8690a529f57705b60ecbc3122925557803197ed8', id: "clear-button", "aria-label": "Clear input", class: {
+            this.isSSSFormat()
+                ? [".", this.getInputsInOrder()[3]]
+                : null,
+        ]), hAsync("div", { key: 'caf4926b8008875a111f6bb3aa0815cfb2e10768', class: "action-buttons" }, showClearButton && (hAsync("ic-button", { key: '9883c16dc3d60c6ea4d9d3cc3e4a770479339879', 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$1, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (hAsync("div", { key: '83fe94cb9dc7b16f70049b36644d62f714e03c6f', class: "show-clock-button-wrapper" }, hAsync("div", { key: '34171a16f8058ad79af9ac3bfeb9c2aea06c0c91', class: { divider: showDivider, [size]: true } }), hAsync("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" })))))), hAsync("span", { key: 'b44af8625ff62cf77e8be3e88d62bcb411bd5dc0', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { key: 'a68f8dac81536f4f14302d7be6151a20c7e92024', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), hAsync("ic-input-validation", { key: 'c152fd0a46420a430bb61f619dbbb395f1dd41cb', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, disabled: this.disabled, innerHTML: Clear$2, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (hAsync("div", { key: '9ace5895419381c300bbdc5c8ef2eeacad05b63b', class: "show-clock-button-wrapper" }, hAsync("div", { key: 'dfa2a5bbf9e7bd74353d7caf3514861d545d6026', class: { divider: showDivider, [size]: true } }), hAsync("ic-button", { key: '1c36dcf4f02a323aafeb265126e2d1334df077b2', 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 && (hAsync("ic-toggle-button-group", { key: 'c63749fddcc1b7ed3c394a17a5d1a65aa322f024', "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();
+                    }
+                }
+            } }, hAsync("ic-toggle-button", { key: 'fc731674e7c26846a969768ddc77b94b14c6cca6', label: "AM", disabled: disabled, checked: true }), hAsync("ic-toggle-button", { key: '89e0bd48a39a8e786fcac5e034358edd560f4136', label: "PM", disabled: disabled })))), hAsync("span", { key: '52854ea1dc4a1c4e7783914ff90bf204848a2e6e', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { key: '065c89020778df53ae78d037ef62feb189b7fdba', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), hAsync("ic-input-validation", { key: 'fc2500bef0e8e077272424a46663a85509a160c3', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -25731,6 +26079,8 @@ class TimeInput {
         "hour": ["watchInputHandler"],
         "minute": ["watchInputHandler"],
         "second": ["watchInputHandler"],
+        "millisecond": ["watchInputHandler"],
+        "period": ["watchInputHandler"],
         "disabled": ["watchDisabledHandler"],
         "helperText": ["watchHelperTextHandler"],
         "max": ["watchMaxHandler"],
@@ -25756,6 +26106,7 @@ class TimeInput {
             "min": [1],
             "name": [1],
             "required": [4],
+            "showAmPmToggle": [1028, "show-am-pm-toggle"],
             "showClearButton": [4, "show-clear-button"],
             "showClockButton": [4, "show-clock-button"],
             "size": [1],
@@ -25773,8 +26124,864 @@ class TimeInput {
             "hour": [32],
             "minute": [32],
             "second": [32],
+            "millisecond": [32],
+            "period": [32],
             "getTime": [64],
-            "triggerIcChange": [64]
+            "triggerIcTimeChange": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+var Check = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.79502 15.875L4.62502 11.705L3.20502 13.115L8.79502 18.705L20.795 6.70501L19.385 5.29501L8.79502 15.875Z" fill="currentColor"/>
+</svg>
+`;
+
+var Clear = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <title>close icon</title>
+</svg>
+`;
+
+const icTimeSelectorCss = ":host(.ic-time-selector-small){--time-selector-padded-item-height:var(--ic-space-lg)}:host(.ic-time-selector-medium){--time-selector-padded-item-height:calc(\n    var(--ic-space-lg) + var(--ic-space-xxs)\n  )}:host(.ic-time-selector-large){--time-selector-padded-item-height:var(--ic-space-xl)}.ic-time-selector-dialog-container{background-color:var(--ic-time-picker-time-selector-bg);border:var(--ic-space-1px) solid var(--ic-time-picker-time-selector-border);border-radius:var(--ic-space-xxs);padding:var(--ic-space-xs);max-width:calc(\n    3 * var(--ic-space-xxl) + var(--ic-space-xl) + var(--ic-space-xxs)\n  );width:-moz-fit-content;width:fit-content}:host(.ic-time-selector-small) .ic-time-selector-dialog-container{padding:var(--ic-space-xxs);max-width:calc(\n    3 * var(--ic-space-xxl) + var(--ic-space-lg) + var(--ic-space-xxs)\n  )}:host(.ic-time-selector-large) .ic-time-selector-dialog-container{padding:var(--ic-space-md);max-width:calc(\n    3 * var(--ic-space-xxl) + var(--ic-space-xl) + var(--ic-space-xs) +\n      var(--ic-space-xxs)\n  )}.ic-time-selector-item{height:var(--ic-space-lg);padding:var(--ic-space-xxxs);text-align:center;cursor:pointer;scroll-snap-align:start;transition:background 0.2s, color 0.2s}:host(.ic-time-selector-small) .ic-time-selector-item{padding:0}:host(.ic-time-selector-large) .ic-time-selector-item{padding:var(--ic-space-xxs)}.ic-time-selector-item:hover:not(.disabled):not(.selected){background-color:var(--ic-time-picker-time-bg-hover)}.ic-time-selector-item:active:not(.disabled):not(.selected){background-color:var(--ic-time-picker-time-bg-pressed)}.ic-time-selector-item.selected{background-color:var(--ic-time-picker-time-bg-selected);--ic-typography-color:var(--ic-time-picker-time-text-selected);position:relative}.ic-time-selector-item.selected:hover{background-color:var(--ic-time-picker-time-active-bg-hover)}.ic-time-selector-item.selected:active{background-color:var(--ic-time-picker-time-active-bg-pressed)}.ic-time-selector-colon-selected{background-color:var(--ic-time-picker-colon-bg-selected);color:var(--ic-time-picker-colon-selected) !important}.ic-time-selector-item.selected::before,.ic-time-selector-item.selected::after,.ic-time-selector-colon-selected::before,.ic-time-selector-colon-selected::after{content:\"\";position:absolute;left:0;right:0;height:var(--ic-space-1px);background:var(--ic-time-picker-time-selector-bg)}.ic-time-selector-item.selected::before,.ic-time-selector-colon-selected::before{top:0}.ic-time-selector-item.selected::after,.ic-time-selector-colon-selected::after{bottom:0}.ic-time-selector-item.disabled{--ic-typography-color:var(--ic-time-picker-time-text-disabled);cursor:not-allowed}.ic-time-selector-column-wrapper{display:flex;flex-direction:column}.ic-time-selector-scroll-row{height:var(--time-selector-padded-item-height) !important;background:transparent !important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default !important;box-sizing:border-box}:host(.ic-time-selector-small) .ic-time-selector-scroll-row-last{height:calc(var(--ic-space-1px) + var(--ic-space-xxxs)) !important}:host(.ic-time-selector-medium) .ic-time-selector-scroll-row-last,:host(.ic-time-selector-large) .ic-time-selector-scroll-row-last{height:calc(\n    var(--ic-space-1px) + var(--ic-space-xxxs) + var(--ic-space-md)\n  ) !important}.ic-time-selector-scroll-row:hover,.ic-time-selector-scroll-row:active{background:transparent !important}.ic-time-selector-header-row{color:var(--ic-time-picker-hh-label);--ic-typography-color:var(--ic-time-picker-hh-label) !important;background:transparent !important;text-align:center;height:var(--time-selector-padded-item-height);display:flex;align-items:center;justify-content:center}.ic-time-selector-header-border{position:absolute;left:0;right:0;top:var(--time-selector-padded-item-height);height:var(--ic-space-1px);background:var(--ic-time-picker-header-border);pointer-events:none}.ic-time-selector-colon{display:flex;align-items:center;justify-content:center;color:var(--ic-time-picker-colon-default);height:var(--time-selector-padded-item-height);margin-top:calc(3 * var(--time-selector-padded-item-height))}.ic-time-selector-columns{display:flex;flex-direction:row;border-bottom:var(--ic-space-1px) solid var(--ic-time-picker-lower-border);margin:0 var(--ic-space-xxs);position:relative;z-index:1}.ic-time-selector-highlight-lines{position:relative;width:100%}.ic-time-selector-highlight{position:absolute;left:0;right:0;width:100%;height:var(--ic-space-1px);background:var(--ic-time-picker-selection-border);pointer-events:none;z-index:1}.ic-time-selector-highlight-top{top:calc(3 * var(--time-selector-padded-item-height) - var(--ic-space-1px))}.ic-time-selector-highlight-bottom{top:calc(4 * var(--time-selector-padded-item-height))}.ic-time-selector-column{height:calc((5 * var(--ic-space-xxl)) + (3 * var(--ic-space-1px)));overflow-y:auto;width:calc(var(--ic-space-xl) + var(--ic-space-xs));position:relative;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}:host(.ic-time-selector-small) .ic-time-selector-column{width:calc(var(--ic-space-xl) + var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-time-selector-large) .ic-time-selector-column{width:calc(var(--ic-space-xl) + var(--ic-space-xs) + var(--ic-space-xxxs))}.ic-time-selector-column-period{margin-left:var(--ic-space-xxs)}.ic-time-selector-column::-webkit-scrollbar{display:none}.ic-time-selector-column:focus-visible,.ic-time-selector-item:focus-visible{outline:none;background-color:transparent}.ic-time-selector-column:focus{box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:3}.ic-time-selector-list{list-style:none;margin:0;padding:0}.ic-time-selector-actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;margin-top:var(--ic-space-xs);margin-left:auto}.ic-time-selector-check-btn{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs))}.sr-only{position:absolute;left:-9999px}@media (forced-colors: active){.ic-time-selector-item.selected{background-color:highlight !important}.ic-time-selector-item.disabled{--ic-typography-color:GrayText !important}.ic-time-selector-column:focus{border:var(--ic-border-hc)}.ic-time-selector-highlight{background:Highlight !important}}";
+var IcTimeSelectorStyle0 = icTimeSelectorCss;
+
+const COLUMN_TYPES = ["hour", "minute", "second", "period"];
+const COLUMN_CLASS = ".ic-time-selector-column";
+const ITEM_CLASS = ".ic-time-selector-item";
+class TimeSelector {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.DEFAULT_TIME_FORMAT = "HH:MM:SS";
+        this.minutes = Array.from({ length: 60 }, (_, i) => i);
+        this.seconds = Array.from({ length: 60 }, (_, i) => i);
+        this.periods = ["AM", "PM"];
+        this.minTime = null;
+        this.maxTime = null;
+        this.ariaLiveMessage = "";
+        /**
+         * An array of times that will be disabled in the time selector. 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 = [];
+        /**
+         * The earliest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.min = "";
+        /**
+         * The latest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.max = "";
+        /**
+         * The size of the time selector to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The format in which the time will be displayed.
+         */
+        this.timeFormat = this.DEFAULT_TIME_FORMAT;
+        /**
+         * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
+         */
+        this.timePeriod = "24";
+        /**
+         * The value of the time selector. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.value = "";
+        this.setTimeParts = (hour, minute, second) => {
+            let period = "AM";
+            if (this.timePeriod === "12") {
+                if (hour === 0) {
+                    hour = 12;
+                    period = "AM";
+                }
+                else if (hour === 12) {
+                    period = "PM";
+                }
+                else if (hour > 12) {
+                    hour = hour - 12;
+                    period = "PM";
+                }
+                else {
+                    period = "AM";
+                }
+                this.selectedHour = hour;
+                this.selectedPeriod = period;
+            }
+            else {
+                this.selectedHour = hour;
+            }
+            this.selectedMinute = minute;
+            this.selectedSecond = second;
+        };
+        this.checkIfScrollIsFinished = (column, scrollTop) => {
+            const isScrollFinished = setInterval(() => {
+                if (column.scrollTop === scrollTop + 56) {
+                    column === null || column === void 0 ? void 0 : column.focus();
+                    clearInterval(isScrollFinished);
+                }
+            }, 25);
+        };
+        this.handleSelect = (type, value) => {
+            var _a;
+            const prevValue = this.getSelectedValue(type);
+            switch (type) {
+                case "hour":
+                    this.selectedHour = Number(value);
+                    break;
+                case "minute":
+                    this.selectedMinute = Number(value);
+                    break;
+                case "second":
+                    this.selectedSecond = Number(value);
+                    break;
+                case "period":
+                    this.selectedPeriod = value;
+                    break;
+            }
+            const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+            const idx = COLUMN_TYPES.indexOf(type);
+            if (columns && columns[idx]) {
+                columns[idx].focus();
+                window.requestAnimationFrame(() => {
+                    this.scrollSelectedItem(type);
+                });
+            }
+            if (prevValue === undefined || prevValue === null) {
+                this.announceSelectedColumn(type);
+            }
+            else {
+                this.lastAnnouncedType = type;
+                this.lastAnnouncedValue = this.getSelectedValue(type);
+            }
+        };
+        this.isTimeDisabled = (hour, minute, second, type) => {
+            var _a, _b, _c, _d;
+            for (const t of this.disableTimes) {
+                if (typeof t === "string" || t instanceof Date) {
+                    const parts = parseTimeHelper(t).parts;
+                    if (parts &&
+                        parts.hour === hour &&
+                        parts.minute === minute &&
+                        parts.second === second) {
+                        return true;
+                    }
+                }
+                else if (t && typeof t === "object" && "start" in t && "end" in t) {
+                    const startParts = parseTimeHelper(t.start).parts;
+                    const endParts = parseTimeHelper(t.end).parts;
+                    if (startParts && endParts) {
+                        const timeVal = hour * 3600 + minute * 60 + second;
+                        const startVal = startParts.hour * 3600 + startParts.minute * 60 + startParts.second;
+                        const endVal = endParts.hour * 3600 + endParts.minute * 60 + endParts.second;
+                        if (timeVal >= startVal && timeVal <= endVal) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            if (this.min) {
+                this.minTime = parseTimeHelper(this.min).date;
+                if (this.minTime) {
+                    const minHour = this.minTime.getHours();
+                    const minMinute = this.minTime.getMinutes();
+                    const minSecond = this.minTime.getSeconds();
+                    if (type === "hour") {
+                        const highlightedMinute = (_a = this.selectedMinute) !== null && _a !== void 0 ? _a : minMinute;
+                        const highlightedSecond = (_b = this.selectedSecond) !== null && _b !== void 0 ? _b : minSecond;
+                        if (hour < minHour ||
+                            (hour === minHour && highlightedMinute < minMinute) ||
+                            (hour === minHour &&
+                                highlightedMinute === minMinute &&
+                                highlightedSecond < minSecond)) {
+                            return true;
+                        }
+                    }
+                    else if (type === "minute") {
+                        if (hour === minHour && minute < minMinute) {
+                            return true;
+                        }
+                    }
+                    else if (type === "second") {
+                        if (hour === minHour && minute === minMinute && second < minSecond) {
+                            return true;
+                        }
+                    }
+                    else {
+                        if (hour < minHour ||
+                            (hour === minHour && minute < minMinute) ||
+                            (hour === minHour && minute === minMinute && second < minSecond)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            if (this.max) {
+                this.maxTime = parseTimeHelper(this.max).date;
+                if (this.maxTime) {
+                    const maxHour = this.maxTime.getHours();
+                    const maxMinute = this.maxTime.getMinutes();
+                    const maxSecond = this.maxTime.getSeconds();
+                    if (type === "hour") {
+                        const selectedMinute = (_c = this.selectedMinute) !== null && _c !== void 0 ? _c : 59;
+                        const selectedSecond = (_d = this.selectedSecond) !== null && _d !== void 0 ? _d : 59;
+                        if (hour > maxHour ||
+                            (hour === maxHour && selectedMinute > maxMinute) ||
+                            (hour === maxHour &&
+                                selectedMinute === maxMinute &&
+                                selectedSecond > maxSecond)) {
+                            return true;
+                        }
+                    }
+                    else if (type === "minute") {
+                        if (hour === maxHour && minute > maxMinute) {
+                            return true;
+                        }
+                    }
+                    else if (type === "second") {
+                        if (hour === maxHour && minute === maxMinute && second > maxSecond) {
+                            return true;
+                        }
+                    }
+                    else {
+                        if (hour > maxHour ||
+                            (hour === maxHour && minute > maxMinute) ||
+                            (hour === maxHour && minute === maxMinute && second > maxSecond)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        this.handleColumnKeyDown = (type, event) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+            const idx = COLUMN_TYPES.indexOf(type);
+            if (!columns)
+                return;
+            const values = this.getColumnValues(type);
+            const selected = this.getSelectedValue(type);
+            const col = columns[idx];
+            if (!col)
+                return;
+            const selectHighlighted = () => {
+                const highlighted = this.getHighlightedValue(type, col);
+                if (highlighted !== null) {
+                    this.handleSelect(type, highlighted);
+                }
+                else if (values.length > 0) {
+                    this.handleSelect(type, values[0]);
+                }
+            };
+            switch (event.key) {
+                case "Enter":
+                case " ":
+                    event.preventDefault();
+                    selectHighlighted();
+                    return;
+                case "ArrowRight":
+                    event.preventDefault();
+                    selectHighlighted();
+                    if (idx < columns.length - 1) {
+                        (_b = columns[idx + 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                    }
+                    return;
+                case "ArrowLeft":
+                    event.preventDefault();
+                    if (idx > 0)
+                        (_c = columns[idx - 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                    return;
+                case "Tab":
+                    if (event.shiftKey) {
+                        if (idx === 0) {
+                            return;
+                        }
+                        else {
+                            event.preventDefault();
+                            (_d = columns[idx - 1]) === null || _d === void 0 ? void 0 : _d.focus();
+                        }
+                    }
+                    else {
+                        event.preventDefault();
+                        selectHighlighted();
+                        this.announceSelectedColumn(type);
+                        if (idx < columns.length - 1) {
+                            (_e = columns[idx + 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                        }
+                        else {
+                            (_g = (_f = this.el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector(".ic-time-selector-clear-btn")) === null || _g === void 0 ? void 0 : _g.focus();
+                            this.updateAriaLiveMessage();
+                        }
+                    }
+                    return;
+                case "ArrowUp":
+                case "ArrowDown": {
+                    let idxInValues = values.findIndex((v) => v === selected);
+                    if (idxInValues === -1)
+                        idxInValues = 0;
+                    let newIdx = idxInValues;
+                    const direction = event.key === "ArrowUp" ? -1 : 1;
+                    const maxIdx = values.length - 1;
+                    do {
+                        newIdx += direction;
+                    } while (newIdx >= 0 &&
+                        newIdx <= maxIdx &&
+                        (() => {
+                            var _a, _b, _c;
+                            if (type === "hour" || type === "minute" || type === "second") {
+                                const hour = type === "hour"
+                                    ? values[newIdx]
+                                    : (_a = this.selectedHour) !== null && _a !== void 0 ? _a : 0;
+                                const minute = type === "minute"
+                                    ? values[newIdx]
+                                    : (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : 0;
+                                const second = type === "second"
+                                    ? values[newIdx]
+                                    : (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : 0;
+                                return this.isTimeDisabled(hour, minute, second);
+                            }
+                            return false;
+                        })());
+                    this.ariaLiveMessage = `Selected ${type}: ${values[newIdx]}`;
+                    if (newIdx >= 0 && newIdx <= maxIdx && newIdx !== idxInValues) {
+                        this.handleSelect(type, values[newIdx]);
+                    }
+                    return;
+                }
+                default:
+                    return;
+            }
+        };
+        this.renderColumn = (type, values, selected) => {
+            const isTimeColumn = type === "hour" || type === "minute" || type === "second";
+            const isPeriodColumn = type === "period";
+            const headerLabel = this.getHeaderLabel(type);
+            const topSpacerCount = 2;
+            let bottomSpacerCount = 6;
+            if (this.size === "large") {
+                bottomSpacerCount = 5;
+            }
+            else if (this.size === "small") {
+                bottomSpacerCount = 8;
+            }
+            return (hAsync("div", { class: "ic-time-selector-column-wrapper" }, isPeriodColumn ? (hAsync("div", { class: "ic-time-selector-header-row" })) : (headerLabel && (hAsync("div", { class: "ic-time-selector-header-row" }, hAsync("ic-typography", { variant: "subtitle-small" }, headerLabel)))), hAsync("div", { class: {
+                    "ic-time-selector-column": true,
+                    "ic-time-selector-column-period": isPeriodColumn,
+                }, tabIndex: 0, onKeyDown: (e) => this.handleColumnKeyDown(type, e) }, hAsync("ul", { class: "ic-time-selector-list", role: "listbox", "aria-label": type }, this.renderScrollRows(topSpacerCount, `${type}-top-spacer`), values.map((val) => {
+                var _a, _b, _c;
+                let disabled = false;
+                if (isTimeColumn) {
+                    const hour = type === "hour" ? val : (_a = this.selectedHour) !== null && _a !== void 0 ? _a : 0;
+                    const minute = type === "minute"
+                        ? val
+                        : (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : 0;
+                    const second = type === "second"
+                        ? val
+                        : (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : 0;
+                    disabled = this.isTimeDisabled(hour, minute, second, type);
+                }
+                return (hAsync("li", { class: {
+                        "ic-time-selector-item": true,
+                        selected: val === selected,
+                        disabled,
+                    }, role: "option", "aria-selected": val === selected ? "true" : "false", "aria-disabled": disabled ? "true" : "false", onClick: () => !disabled && this.handleSelect(type, val), tabIndex: -1, key: `${type}-val-${val}` }, hAsync("ic-typography", { variant: "subtitle-small" }, typeof val === "number"
+                    ? val.toString().padStart(2, "0")
+                    : val)));
+            }), (isTimeColumn || isPeriodColumn) &&
+                this.renderScrollRows(bottomSpacerCount, `${type}-bottom-spacer`)))));
+        };
+        this.handleClear = () => {
+            this.selectedHour = undefined;
+            this.scrollSelectedItem("hour", true);
+            this.selectedMinute = undefined;
+            this.scrollSelectedItem("minute", true);
+            this.selectedSecond = undefined;
+            this.scrollSelectedItem("second", true);
+            this.selectedPeriod = undefined;
+            this.scrollSelectedItem("period", true);
+            this.lastAnnouncedType = undefined;
+            this.lastAnnouncedValue = undefined;
+            this.icChange.emit({
+                value: null,
+                timeString: null,
+                timeObject: {
+                    hour: null,
+                    minute: null,
+                    second: null,
+                    period: undefined,
+                },
+            });
+        };
+        this.handleConfirmClick = () => {
+            const hour = this.selectedHour != null ? this.selectedHour : null;
+            const minute = this.selectedMinute != null ? this.selectedMinute : null;
+            const second = this.selectedSecond != null ? this.selectedSecond : null;
+            const period = this.selectedPeriod;
+            const hourStr = hour != null ? hour.toString().padStart(2, "0") : null;
+            const minuteStr = minute != null ? minute.toString().padStart(2, "0") : null;
+            const secondStr = second != null ? second.toString().padStart(2, "0") : null;
+            let allSelected = false;
+            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                allSelected = hour !== null && minute !== null && second !== null;
+            }
+            else {
+                allSelected = hour !== null && minute !== null;
+            }
+            let value = null;
+            let timeString = null;
+            if (allSelected) {
+                let date24hours = hour;
+                if (hour != null && period && this.timePeriod === "12") {
+                    if (period === "PM" && hour < 12)
+                        date24hours = hour + 12;
+                    if (period === "AM" && hour === 12)
+                        date24hours = 0;
+                }
+                value = new Date();
+                value.setHours(date24hours !== null && date24hours !== void 0 ? date24hours : 0);
+                value.setMinutes(minute !== null && minute !== void 0 ? minute : 0);
+                value.setSeconds(second !== null && second !== void 0 ? second : 0);
+                value.setMilliseconds(0);
+                if (this.timeFormat === "HH:MM") {
+                    timeString = hourStr + ":" + minuteStr + (period ? " " + period : "");
+                }
+                else if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                    timeString =
+                        hourStr +
+                            ":" +
+                            minuteStr +
+                            ":" +
+                            secondStr +
+                            (period ? " " + period : "");
+                }
+                this.value = value;
+            }
+            this.icChange.emit({
+                value: allSelected ? value : null,
+                timeString: allSelected ? timeString : null,
+                timeObject: Object.assign({ hour: hourStr, minute: minuteStr, second: secondStr }, (period ? { period } : {})),
+            });
+        };
+    }
+    watchMinHandler() {
+        this.minTime = parseTimeHelper(this.min).date;
+    }
+    watchMaxHandler() {
+        this.maxTime = parseTimeHelper(this.max).date;
+    }
+    watchValueHandler() {
+        this.setTime(this.value);
+        setTimeout(() => {
+            this.scrollSelectedItem("hour");
+            this.scrollSelectedItem("minute");
+            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                this.scrollSelectedItem("second");
+            }
+            if (this.timePeriod === "12") {
+                this.scrollSelectedItem("period");
+            }
+        }, 0);
+    }
+    componentWillLoad() {
+        this.setTime(this.value);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            if (this.selectedHour !== undefined && this.selectedHour !== null) {
+                this.scrollSelectedItem("hour");
+            }
+            else if (this.min) {
+                this.scrollMinTime("hour");
+            }
+            if (this.selectedMinute !== undefined && this.selectedMinute !== null) {
+                this.scrollSelectedItem("minute");
+            }
+            else if (this.min) {
+                this.scrollMinTime("minute");
+            }
+            if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                if (this.selectedSecond !== undefined && this.selectedSecond !== null) {
+                    this.scrollSelectedItem("second");
+                }
+                else if (this.min) {
+                    this.scrollMinTime("second");
+                }
+            }
+            if (this.timePeriod === "12") {
+                if (this.selectedPeriod !== undefined && this.selectedPeriod !== null) {
+                    this.scrollSelectedItem("period");
+                }
+                else if (this.min) {
+                    this.scrollMinTime("period");
+                }
+            }
+            this.updateAriaLiveMessage();
+        }, 0);
+    }
+    getHeaderLabel(type) {
+        switch (type) {
+            case "hour":
+                return "HH";
+            case "minute":
+                return "MM";
+            case "second":
+                return "SS";
+            default:
+                return "";
+        }
+    }
+    setTime(time) {
+        if (time === null || time === undefined || time === "") {
+            this.handleClear();
+            return;
+        }
+        if (typeof time === "string") {
+            const zuluMatch = time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})(?:\.[0-9]{1,3})?Z?$/);
+            if (zuluMatch) {
+                this.setTimeParts(Number(zuluMatch[1]), Number(zuluMatch[2]), Number(zuluMatch[3]));
+            }
+            else {
+                const parts = time.split(":");
+                this.setTimeParts(Number(parts[0]) || 0, Number(parts[1]) || 0, Number(parts[2]) || 0);
+            }
+        }
+        else {
+            const { parts } = parseTimeHelper(time);
+            if (parts) {
+                this.setTimeParts(parts.hour, parts.minute, parts.second);
+            }
+        }
+    }
+    renderScrollRows(count, keyPrefix = "scroll-row") {
+        return Array.from({ length: count }).map((_, i) => {
+            const isLast = keyPrefix.endsWith("bottom-spacer")
+                ? i === count - 1
+                : false;
+            return (hAsync("li", { class: Object.assign({ "ic-time-selector-item": true, "ic-time-selector-scroll-row": true }, (isLast ? { "ic-time-selector-scroll-row-last": true } : {})), "aria-hidden": "true", tabIndex: -1, key: `${keyPrefix}-${i}` }));
+        });
+    }
+    scrollSelectedItem(colClass, clear) {
+        var _a;
+        const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+        let colIdx = COLUMN_TYPES.indexOf(colClass);
+        if (colClass === "period" && (columns === null || columns === void 0 ? void 0 : columns.length)) {
+            colIdx = columns.length - 1;
+        }
+        const col = columns === null || columns === void 0 ? void 0 : columns[colIdx];
+        if (col) {
+            const items = col.querySelectorAll(ITEM_CLASS);
+            let selectedIdx = -1;
+            items.forEach((item, idx) => {
+                if (item.classList.contains("selected"))
+                    selectedIdx = idx;
+            });
+            if (clear) {
+                selectedIdx = 0;
+            }
+            if (selectedIdx > -1) {
+                const scrollRow = col.querySelector(".ic-time-selector-scroll-row");
+                let resolvedHeight = 0;
+                if (scrollRow) {
+                    resolvedHeight = parseFloat(getComputedStyle(scrollRow).height);
+                }
+                const offset = resolvedHeight * 2;
+                const scrollTop = items[selectedIdx].offsetTop - offset;
+                const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+                col.scrollTo({
+                    top: scrollTop,
+                    behavior: prefersReducedMotion ? "instant" : "smooth",
+                });
+                if (clear) {
+                    setTimeout(() => {
+                        var _a;
+                        const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+                        if (columns && columns.length > 0) {
+                            this.checkIfScrollIsFinished(columns[0], scrollTop);
+                        }
+                    }, 300);
+                }
+            }
+        }
+    }
+    scrollMinTime(colClass) {
+        var _a;
+        const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+        const colIdx = COLUMN_TYPES.indexOf(colClass);
+        const col = columns === null || columns === void 0 ? void 0 : columns[colIdx];
+        if (!col)
+            return;
+        const items = col.querySelectorAll(ITEM_CLASS);
+        let minHour = 0, minMinute = 0, minSecond = 0;
+        if (this.minTime) {
+            minHour = this.minTime.getHours() + 2;
+            minMinute = this.minTime.getMinutes() + 2;
+            minSecond = this.minTime.getSeconds();
+        }
+        else if (this.min) {
+            const minDate = parseTimeHelper(this.min).date;
+            if (minDate) {
+                minHour = minDate.getHours();
+                minMinute = minDate.getMinutes();
+                minSecond = minDate.getSeconds();
+            }
+        }
+        let targetIdx = -1;
+        const values = this.getColumnValues(colClass);
+        if (colClass === "hour") {
+            targetIdx = values.findIndex((v) => v === minHour);
+        }
+        else if (colClass === "minute") {
+            targetIdx = values.findIndex((v) => v === minMinute);
+        }
+        else if (colClass === "second") {
+            targetIdx = values.findIndex((v) => v === minSecond);
+        }
+        else if (colClass === "period") {
+            let period = "AM";
+            if (this.timePeriod === "12") {
+                if (minHour === 0) {
+                    period = "AM";
+                }
+                else if (minHour === 12) {
+                    period = "PM";
+                }
+                else if (minHour > 12) {
+                    period = "PM";
+                }
+                else {
+                    period = "AM";
+                }
+            }
+            targetIdx = values.findIndex((v) => v === period);
+        }
+        if (targetIdx > -1) {
+            const scrollRow = col.querySelector(".ic-time-selector-scroll-row");
+            let resolvedHeight = 0;
+            if (scrollRow) {
+                resolvedHeight = parseFloat(getComputedStyle(scrollRow).height);
+            }
+            const offset = resolvedHeight * 2;
+            const scrollTop = items[targetIdx].offsetTop - offset;
+            const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+            col.scrollTo({
+                top: scrollTop,
+                behavior: prefersReducedMotion ? "instant" : "smooth",
+            });
+        }
+    }
+    announceSelectedColumn(type) {
+        const value = this.getSelectedValue(type);
+        if (value !== null &&
+            value !== undefined &&
+            (type !== this.lastAnnouncedType || value !== this.lastAnnouncedValue)) {
+            this.ariaLiveMessage = `Selected ${type}: ${value}`;
+        }
+        else {
+            this.ariaLiveMessage = "";
+        }
+        this.lastAnnouncedType = type;
+        this.lastAnnouncedValue = value;
+    }
+    getColumnValues(type) {
+        if (type === "hour")
+            return this.timePeriod === "12"
+                ? Array.from({ length: 12 }, (_, i) => i + 1)
+                : Array.from({ length: 24 }, (_, i) => i);
+        if (type === "minute")
+            return this.minutes;
+        if (type === "second")
+            return this.seconds;
+        if (type === "period")
+            return this.periods;
+        return [];
+    }
+    getSelectedValue(type) {
+        var _a, _b, _c, _d;
+        if (type === "hour")
+            return (_a = this.selectedHour) !== null && _a !== void 0 ? _a : null;
+        if (type === "minute")
+            return (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : null;
+        if (type === "second")
+            return (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : null;
+        if (type === "period")
+            return (_d = this.selectedPeriod) !== null && _d !== void 0 ? _d : null;
+        return null;
+    }
+    getHighlightedValue(type, col) {
+        var _a, _b, _c;
+        const items = Array.from(col.querySelectorAll(ITEM_CLASS));
+        const realItems = items.filter((item) => !item.classList.contains("ic-time-selector-scroll-row"));
+        if (realItems.length === 0)
+            return null;
+        const highlightTop = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".ic-time-selector-highlight-top");
+        const highlightBottom = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".ic-time-selector-highlight-bottom");
+        if (!highlightTop || !highlightBottom)
+            return null;
+        const topRect = highlightTop.getBoundingClientRect();
+        const bottomRect = highlightBottom.getBoundingClientRect();
+        const highlightStart = topRect.bottom;
+        const highlightEnd = bottomRect.top;
+        for (const item of realItems) {
+            const itemRect = item.getBoundingClientRect();
+            const itemCenter = itemRect.top + itemRect.height / 2;
+            if (itemCenter >= highlightStart && itemCenter <= highlightEnd) {
+                const key = item.getAttribute("key");
+                if (key) {
+                    const valStr = key.replace(`${type}-val-`, "");
+                    if (type === "hour" || type === "minute" || type === "second") {
+                        return Number(valStr);
+                    }
+                    else {
+                        return valStr;
+                    }
+                }
+                const text = (_c = item.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+                if (type === "hour" || type === "minute" || type === "second") {
+                    return text ? Number(text) : null;
+                }
+                else {
+                    return text;
+                }
+            }
+        }
+        return null;
+    }
+    updateAriaLiveMessage() {
+        const hourStr = this.selectedHour != null
+            ? this.selectedHour.toString().padStart(2, "0")
+            : null;
+        const minuteStr = this.selectedMinute != null
+            ? this.selectedMinute.toString().padStart(2, "0")
+            : null;
+        const secondStr = this.selectedSecond != null
+            ? this.selectedSecond.toString().padStart(2, "0")
+            : null;
+        let timeString = "";
+        let allSelected = false;
+        if (this.timeFormat === "HH:MM") {
+            allSelected = hourStr !== null && minuteStr !== null;
+            if (allSelected) {
+                timeString =
+                    hourStr +
+                        ":" +
+                        minuteStr +
+                        (this.selectedPeriod ? " " + this.selectedPeriod : "");
+            }
+        }
+        else if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+            allSelected =
+                hourStr !== null && minuteStr !== null && secondStr !== null;
+            if (allSelected) {
+                timeString =
+                    hourStr +
+                        ":" +
+                        minuteStr +
+                        ":" +
+                        secondStr +
+                        (this.selectedPeriod ? " " + this.selectedPeriod : "");
+            }
+        }
+        this.ariaLiveMessage =
+            allSelected && timeString ? `Selected time: ${timeString}` : "";
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const hours = this.timePeriod === "12"
+            ? Array.from({ length: 12 }, (_, i) => i + 1)
+            : Array.from({ length: 24 }, (_, i) => i);
+        const timeFormat = this.timeFormat || this.DEFAULT_TIME_FORMAT;
+        const columns = [
+            this.renderColumn("hour", hours, (_a = this.selectedHour) !== null && _a !== void 0 ? _a : null),
+            this.renderColumn("minute", this.minutes, (_b = this.selectedMinute) !== null && _b !== void 0 ? _b : null),
+        ];
+        if (timeFormat === this.DEFAULT_TIME_FORMAT) {
+            columns.push(this.renderColumn("second", this.seconds, (_c = this.selectedSecond) !== null && _c !== void 0 ? _c : null));
+        }
+        let colonSelectedStates = [];
+        if (timeFormat === this.DEFAULT_TIME_FORMAT) {
+            colonSelectedStates = [
+                this.selectedHour !== undefined && this.selectedMinute !== undefined,
+                this.selectedMinute !== undefined && this.selectedSecond !== undefined,
+            ];
+        }
+        else {
+            colonSelectedStates = [
+                this.selectedHour !== undefined && this.selectedMinute !== undefined,
+            ];
+        }
+        const isInPicker = this.el.closest("ic-time-picker") !== null;
+        const { size, theme, timePeriod } = this;
+        return (hAsync(Host, { key: '0a25adbaeba34a4dcd3ef15edd5076d8ed4ad0a5', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-time-selector-${size}`]: true,
+            } }, hAsync("div", { key: 'e65b452fb22c989b634fd1d8839ecf3bcb5c8a96', role: isInPicker ? "dialog" : undefined, "aria-modal": isInPicker ? true : undefined, "aria-label": "Select time. Use arrow keys to navigate and select the options and then tab to move onto the next selection.", class: {
+                "ic-time-selector-dialog-container": true,
+            } }, hAsync("div", { key: '178213ede67d838f70b8bd164aac6481a97b03eb', class: "ic-time-selector-highlight-lines" }, hAsync("div", { key: 'c10de931f6cba5496de152f1fdfc87a118413e08', class: "ic-time-selector-header-border" }), hAsync("div", { key: '440b09028d77256e9b0bb18cc2f24550eac5f30d', class: {
+                "ic-time-selector-highlight": true,
+                "ic-time-selector-highlight-top": true,
+            } }), hAsync("div", { key: 'eed615b5bbd35c5b0d0a5b3625710b00675856ab', class: "ic-time-selector-columns" }, columns.map((col, idx) => [
+            col,
+            idx < columns.length - 1 ? (hAsync("ic-typography", { class: {
+                    "ic-time-selector-colon": true,
+                    "ic-time-selector-colon-selected": colonSelectedStates[idx],
+                }, variant: "subtitle-small", "aria-hidden": "true", key: `colon-${idx}` }, ":")) : null,
+        ]), timePeriod !== "24" &&
+            this.renderColumn("period", this.periods, (_d = this.selectedPeriod) !== null && _d !== void 0 ? _d : null)), hAsync("div", { key: '8b2b12a4e907c615b7e79d9801d5840d522e775d', class: {
+                "ic-time-selector-highlight": true,
+                "ic-time-selector-highlight-bottom": true,
+            } })), hAsync("div", { key: '0d3a320315b1cf0557b8d281b6e468ef517b7ff4', class: "ic-time-selector-actions" }, hAsync("ic-button", { key: '70d842672493c3a63ced6571d7e1ab6afba2abdf', variant: "icon-tertiary", "aria-label": "Clear time", class: {
+                "ic-time-selector-clear-btn": true,
+            }, onClick: this.handleClear, disabled: this.selectedHour === undefined &&
+                this.selectedMinute === undefined &&
+                this.selectedSecond === undefined &&
+                this.selectedPeriod === undefined, size: size, tabIndex: 0, onKeyDown: (e) => {
+                var _a;
+                if (e.key === "Tab" && e.shiftKey) {
+                    e.preventDefault();
+                    const columns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(COLUMN_CLASS);
+                    if (columns && columns.length > 0) {
+                        const lastCol = columns[columns.length - 1];
+                        lastCol === null || lastCol === void 0 ? void 0 : lastCol.focus();
+                    }
+                }
+            } }, hAsync("span", { key: '45c66f9552c10be9e3b466342c6e7d22fd7df90b', "aria-hidden": "true", innerHTML: Clear })), hAsync("ic-button", { key: 'eae553c514bc635a71220b969044df8d32e457bb', variant: "icon-tertiary", "aria-label": "Select time", class: "ic-time-selector-check-btn", onClick: this.handleConfirmClick, disabled: this.selectedHour === undefined &&
+                this.selectedMinute === undefined &&
+                this.selectedSecond === undefined &&
+                this.selectedPeriod === undefined, size: size, tabIndex: 0 }, hAsync("span", { key: 'f586f8d1b2659d3cf2f0f8e7365ebcd9828ebf23', "aria-hidden": "true", innerHTML: Check })))), hAsync("div", { key: '27dd2db88615040635a0b61b9e785d50a488d90a', class: "sr-only", "aria-live": "polite" }, this.ariaLiveMessage)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "min": ["watchMinHandler"],
+        "max": ["watchMaxHandler"],
+        "value": ["watchValueHandler"]
+    }; }
+    static get style() { return IcTimeSelectorStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ic-time-selector",
+        "$members$": {
+            "disableTimes": [16],
+            "min": [1],
+            "max": [1],
+            "size": [1],
+            "theme": [1],
+            "timeFormat": [1, "time-format"],
+            "timePeriod": [1, "time-period"],
+            "value": [1025],
+            "selectedHour": [32],
+            "selectedMinute": [32],
+            "selectedSecond": [32],
+            "selectedPeriod": [32],
+            "ariaLiveMessage": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -26304,6 +27511,7 @@ class ToggleButtonGroup {
             key: null,
             shift: false,
         };
+        this.externallySetActiveToggle = null;
         /**
          * The accessible label of the toggle button group component to provide context for screen reader users.
          */
@@ -26387,7 +27595,15 @@ class ToggleButtonGroup {
                 key !== "ArrowUp")
                 return;
             const toggleButtonOptions = this.getAllToggleButtons();
-            const targetToggle = toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === document.activeElement)[0]), key === "ArrowDown" || key === "ArrowRight")];
+            let targetToggle;
+            if (this.externallySetActiveToggle) {
+                targetToggle =
+                    toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === this.externallySetActiveToggle)[0]), key === "ArrowDown" || key === "ArrowRight")];
+            }
+            else {
+                targetToggle =
+                    toggleButtonOptions[this.getNextItemToSelect(toggleButtonOptions.indexOf(toggleButtonOptions.filter((el) => el === document.activeElement)[0]), key === "ArrowDown" || key === "ArrowRight")];
+            }
             if (this.selectMethod === "auto") {
                 // trigger selectHandler when unable to add 'target'
                 targetToggle.checked = true;
@@ -26497,6 +27713,12 @@ class ToggleButtonGroup {
             });
         }
     }
+    /**
+     * @internal Used to enable other components to set the active toggle button when toggle button group is in a shadow dom.
+     */
+    async setActiveToggle(toggle) {
+        this.externallySetActiveToggle = toggle;
+    }
     componentWillLoad() {
         if (this.selectType === "multi")
             this.selectMethod = "manual";
@@ -26525,14 +27747,14 @@ class ToggleButtonGroup {
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
-        return (hAsync(Host, { key: '57a5273a71510ce0c22fec40fa9bd924b475c185', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
+        return (hAsync(Host, { key: '5ae12c9f09c65a04cbe1f19850998c0d942327c8', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 "ic-toggle-button-group-hide-outline": !outline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, hAsync("slot", { key: '2d957f4dec7d5c097a39be86538c2dcea68cffdc' })));
+            }, onFocus: this.handleHostFocus }, hAsync("slot", { key: '02c4f4cd7df626d4032246bdbcd7e07d2167ba52' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26564,7 +27786,9 @@ class ToggleButtonGroup {
             "theme": [1],
             "tooltipPlacement": [1, "tooltip-placement"],
             "variant": [513],
-            "lastKeyPressed": [32]
+            "lastKeyPressed": [32],
+            "externallySetActiveToggle": [32],
+            "setActiveToggle": [64]
         },
         "$listeners$": [[0, "icToggleChecked", "selectHandler"]],
         "$lazyBundleId$": "-",
@@ -27378,7 +28602,7 @@ class TreeItem {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '735aa762f3a11335e21af5ce963b703bc85e0070', class: {
+        return (hAsync(Host, { key: '2b66767ebcadc7f0d59c0e2309424e01dbc49410', class: {
                 "ic-tree-item-disabled": disabled,
                 "ic-tree-item-selected": !disabled && selected,
                 [`ic-tree-item-${size}`]: size !== "medium",
@@ -27389,7 +28613,7 @@ class TreeItem {
             }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (hAsync("span", { class: {
                 ["arrow-dropdown"]: true,
                 ["tree-item-expanded"]: expanded,
-            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? hAsync("slot", { name: "label" }) : label))), expanded && (hAsync("div", { key: 'ca3bf6979ae492a45fadd0e5cac144139511842f', "aria-hidden": `${!expanded}` }, hAsync("slot", { key: 'e7142f27b9d7d753ace48748ea1d74266c9940e2' })))));
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (hAsync("div", { class: "icon-container" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? hAsync("slot", { name: "label" }) : label))), expanded && (hAsync("div", { key: '1806805bf01bf7d6320b753a2ed577ea08b8f716', "aria-hidden": `${!expanded}` }, hAsync("slot", { key: '2c7de11af3f2248a6c7ca57d43f56851046cc26a' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27746,14 +28970,14 @@ class TreeView {
     }
     render() {
         const { heading, isLoaded, size, theme, truncateHeading } = this;
-        return (hAsync(Host, { key: '28757cb9ec7287dbeca529a06194945e85d59961', "context-id": this.treeViewId, class: {
+        return (hAsync(Host, { key: 'b64c96601e14f028d70d42596ab73c3adcc5c50c', "context-id": this.treeViewId, class: {
                 [`ic-tree-view-${size}`]: size !== "medium",
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tree-view-truncate": truncateHeading,
-            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (hAsync("div", { key: '5f60334aa3bcb1981f838f2961a363ac8c71e836', class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (hAsync("div", { key: '547a4d855e7f595504b3eec6df1b49913b85bbbf', class: "icon-container" }, hAsync("slot", { key: 'bd75707980d222e48aa143c4bf9b06be06d2b9e3', name: "icon" }))), hAsync("ic-typography", { key: 'c272371c592cf629a8ac4bcc0f4e6b907e27e526', variant: "subtitle-large", class: {
+            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (hAsync("div", { key: '2147d52cb5d094a6b2030707832e7986452ec793', class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (hAsync("div", { key: '884b18baa7bf9a6530578e14e554e7da405184e4', class: "icon-container" }, hAsync("slot", { key: 'a7b165ab9a5851dd0006a0ed2d58299c6cce8008', name: "icon" }))), hAsync("ic-typography", { key: 'b851dc0c5d16d8127ba3e3e0c0efdbbb2675bdd4', variant: "subtitle-large", class: {
                 "tree-view-header": true,
                 "with-padding": this.truncateHeading && !isLoaded,
-            } }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (heading)))), hAsync("slot", { key: '7cd22f3cf4e5eb8850632aca6a8f8c2e4e26d743' })));
+            } }, isSlotUsed(this.el, "heading") ? (hAsync("slot", { name: "heading" })) : (heading)))), hAsync("slot", { key: '1e2577f386a2121c89644f395358fb746eb63cd1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28067,6 +29291,7 @@ registerComponents([
   TextField,
   Theme,
   TimeInput,
+  TimeSelector,
   Toast,
   ToastRegion,
   ToggleButton,