@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.80

package/dist/chunks/resources5.js

@@ -1,62 +1,59 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 const CSS = {
-  actionsEnd: "actions-end",
-  actionsStart: "actions-start",
-  description: "description",
-  close: "close",
+  actionBarContainer: "action-bar-container",
   container: "container",
-  containerHover: "container--hover",
-  containerBorder: "container--border",
-  containerBorderSelected: "container--border-selected",
-  containerBorderUnselected: "container--border-unselected",
-  content: "content",
   contentBottom: "content-bottom",
-  contentContainer: "content-container",
-  contentContainerHasCenterContent: "content-container--has-center-content",
-  contentContainerSelectable: "content-container--selectable",
-  contentContainerUnavailable: "content-container--unavailable",
-  contentContainerWrapper: "content-container-wrapper",
-  contentContainerWrapperBordered: "content-container-wrapper--bordered",
-  contentEnd: "content-end",
-  contentStart: "content-start",
-  customContent: "custom-content",
-  expandedContainer: "expanded-container",
-  dragContainer: "drag-container",
-  gridCell: "grid-cell",
+  contentTop: "content-top",
+  header: "header",
+  headerContainer: "header-container",
+  headerContainerBorderEnd: "header-container--border-end",
+  headingTextContent: "heading-text-content",
+  heading: "heading",
+  description: "description",
+  headerContent: "header-content",
+  headerActions: "header-actions",
+  headerActionsEnd: "header-actions--end",
+  headerActionsStart: "header-actions--start",
   icon: "icon",
-  nestedContainer: "nested-container",
-  nestedContainerExpanded: "nested-container--expanded",
-  label: "label",
-  row: "row",
-  selectionContainer: "selection-container",
-  selectionContainerSingle: "selection-container--single",
-  wrapper: "wrapper",
-  wrapperBordered: "wrapper--bordered"
+  contentWrapper: "content-wrapper",
+  fabContainer: "fab-container",
+  footer: "footer",
+  footerContent: "footer-content",
+  footerStart: "footer-start",
+  footerEnd: "footer-end",
+  headerSlottedContent: "header--slotted-content",
+  headerNonSlottedContent: "header--non-slotted-content",
+  menuAction: "menu-action"
 };
-const SLOTS = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  content: "content",
-  contentBottom: "content-bottom",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
+const IDS = {
+  close: "close",
+  collapse: "collapse"
 };
-const MAX_COLUMNS = 0;
 const ICONS = {
-  selectedMultiple: "check-square-f",
-  selectedSingle: "circle-inset-large",
-  unselectedMultiple: "square",
-  unselectedSingle: "circle",
-  collapsedLTR: "chevron-right",
-  collapsedRTL: "chevron-left",
-  open: "chevron-down",
-  blank: "blank",
-  close: "x"
+  close: "x",
+  menu: "ellipsis",
+  expand: "chevron-down",
+  collapse: "chevron-up"
+};
+const SLOTS = {
+  actionBar: "action-bar",
+  alerts: "alerts",
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
+  headerActionsStart: "header-actions-start",
+  headerActionsEnd: "header-actions-end",
+  headerMenuActions: "header-menu-actions",
+  headerContent: "header-content",
+  fab: "fab",
+  footer: "footer",
+  footerEnd: "footer-end",
+  footerStart: "footer-start"
 };
-const activeCellTestAttribute = "data-test-active";
 export {
   CSS as C,
   ICONS as I,
-  MAX_COLUMNS as M,
   SLOTS as S,
-  activeCellTestAttribute as a
+  IDS as a
 };

package/dist/chunks/resources6.js

@@ -1,60 +1,19 @@
-const ComboboxItemSelector = "CALCITE-COMBOBOX-ITEM";
-const ComboboxItemGroupSelector = "CALCITE-COMBOBOX-ITEM-GROUP";
-const AllComboboxChildrenSelector = `${ComboboxItemSelector}, ${ComboboxItemGroupSelector}`;
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 const CSS = {
-  allSelected: "all-selected",
-  chip: "chip",
-  chipInvisible: "chip--invisible",
+  container: "container",
+  containerNone: "container--none-selection",
   icon: "icon",
-  input: "input",
-  inputHidden: "input--hidden",
-  label: "label",
-  labelIcon: "label--icon",
-  listContainer: "list-container",
-  noMatches: "no-matches",
-  noMatchesPlaceholder: "no-matches-placeholder",
-  placeholderIcon: "placeholder-icon",
-  selectAll: "select-all",
-  selectionDisplayFit: "selection-display--fit",
-  selectionDisplaySingle: "selection-display--single",
-  selectedIcon: "selected-icon",
-  floatingUIContainer: "floating-ui-container",
-  screenReadersOnly: "screen-readers-only",
-  wrapper: "wrapper",
-  wrapperSingle: "wrapper--single",
-  wrapperActive: "wrapper--active",
-  gridInput: "grid-input",
-  inputSingle: "input--single",
-  inputIcon: "input--icon",
-  inputWrap: "input-wrap",
-  inputWrapSingle: "input-wrap--single",
-  iconEnd: "icon-end",
-  iconStart: "icon-start",
-  list: "list",
-  listHide: "list--hide"
-};
-const idPrefix = "combobox";
-const IDS = {
-  validationMessage: "comboboxValidationMessage",
-  item: (id) => `${idPrefix}-item-${id}`,
-  chip: (id) => `${idPrefix}-chip-${id}`,
-  label: (id) => `${idPrefix}-label-${id}`,
-  listbox: (id) => `${idPrefix}-listbox-${id}`,
-  input: (id) => `${idPrefix}-input-${id}`
+  iconEnd: "icon--end",
+  iconStart: "icon--start",
+  itemContent: "content",
+  link: "link"
 };
 const ICONS = {
-  chevronUp: "chevron-up",
-  chevronDown: "chevron-down"
-};
-const SLOTS = {
-  labelContent: "label-content"
+  check: "check"
 };
 export {
-  AllComboboxChildrenSelector as A,
-  ComboboxItemSelector as C,
-  IDS as I,
-  SLOTS as S,
-  ComboboxItemGroupSelector as a,
-  CSS as b,
-  ICONS as c
+  CSS as C,
+  ICONS as I
 };

package/dist/chunks/resources7.js

@@ -1,17 +1,21 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 const CSS = {
   container: "container",
-  containerNone: "container--none-selection",
-  icon: "dropdown-item-icon",
-  iconEnd: "dropdown-item-icon--end",
-  iconStart: "dropdown-item-icon--start",
-  itemContent: "dropdown-item-content",
-  link: "dropdown-link"
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  content: "content",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
 };
-const ICONS = {
-  check: "check",
-  bulletPoint: "bullet-point"
+const SLOTS = {
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
 };
 export {
   CSS as C,
-  ICONS as I
+  SLOTS as S
 };

package/dist/chunks/resources8.js

@@ -1,15 +1,65 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
+const CSS = {
+  actionsEnd: "actions-end",
+  actionsStart: "actions-start",
+  description: "description",
+  close: "close",
+  container: "container",
+  containerHover: "container--hover",
+  containerBorder: "container--border",
+  containerBorderSelected: "container--border-selected",
+  containerHighlightSelected: "container--highlight-selected",
+  content: "content",
+  contentBottom: "content-bottom",
+  contentContainer: "content-container",
+  contentContainerHasCenterContent: "content-container--has-center-content",
+  contentContainerSelectable: "content-container--selectable",
+  contentContainerUnavailable: "content-container--unavailable",
+  contentContainerWrapper: "content-container-wrapper",
+  contentContainerWrapperBordered: "content-container-wrapper--bordered",
+  contentEnd: "content-end",
+  contentStart: "content-start",
+  customContent: "custom-content",
+  expandedContainer: "expanded-container",
+  dragContainer: "drag-container",
+  gridCell: "grid-cell",
+  icon: "icon",
+  nestedContainer: "nested-container",
+  nestedContainerExpanded: "nested-container--expanded",
+  label: "label",
+  row: "row",
+  selectionContainer: "selection-container",
+  selectionContainerSingle: "selection-container--single",
+  wrapper: "wrapper",
+  wrapperBordered: "wrapper--bordered"
+};
 const SLOTS = {
-  menuActions: "menu-actions",
-  menuTooltip: "menu-tooltip"
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  content: "content",
+  contentBottom: "content-bottom",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
 };
+const MAX_COLUMNS = 0;
 const ICONS = {
-  menu: "ellipsis"
-};
-const CSS = {
-  container: "container"
+  selectedMultiple: "check-square-f",
+  selectedSingle: "circle-inset-large",
+  unselectedMultiple: "square",
+  unselectedSingle: "circle",
+  collapsedLTR: "chevron-right",
+  collapsedRTL: "chevron-left",
+  open: "chevron-down",
+  blank: "blank",
+  close: "x"
 };
+const activeCellTestAttribute = "data-test-active";
 export {
   CSS as C,
   ICONS as I,
-  SLOTS as S
+  MAX_COLUMNS as M,
+  SLOTS as S,
+  activeCellTestAttribute as a
 };

package/dist/chunks/responsive.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { d as calciteContainerSizeWidthXxs, e as calciteContainerSizeWidthXs, f as calciteContainerSizeWidthSm, g as calciteContainerSizeWidthMd } from "./global.js";
 const breakpoints = {
   width: {

package/dist/chunks/runtime.js

@@ -1,7 +1,9 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import "../cdn/main.css";
 import { makeRuntime } from "@arcgis/lumina";
 import { isServer } from "lit";
-import "lit-html/is-server.js";
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";
 const lightMode = "calcite-mode-light";
@@ -60,9 +62,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.0.0-next.8";
-const buildDate = "2025-11-24";
-const revision = "f9e38a4f9";
+const version = "5.0.0-next.80";
+const buildDate = "2026-01-26";
+const revision = "8ea43bd5b";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -85,15 +87,15 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.0.0-next.8/dist/calcite/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.0.0-next.80/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,
   DEBOUNCE as D,
-  resizeShiftStep as a,
-  resizeStep as b,
+  getConfig as a,
+  resizeShiftStep as b,
   customElement as c,
-  getConfig as d,
+  resizeStep as d,
   getAssetPath as g,
   runtime as r,
   setAssetPath as s

package/dist/chunks/sortable.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { css } from "lit";
 const styles = css`:host(.calcite-sortable--chosen),:host(.calcite-sortable--drag),:host(.calcite-sortable--fallback),:host(.calcite-sortable--ghost){position:relative;overflow:hidden}:host(.calcite-sortable--ghost):before{content:"";position:absolute;inset-block:0px;inset-inline-start:0px;inset-inline-end:0px;z-index:var(--calcite-z-index);box-sizing:border-box;border-width:1px;border-style:dashed;border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-2)}:host(.calcite-sortable--drag){--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}`;
 export {

package/dist/chunks/sortableComponent.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import Sortable from "sortablejs";
 const sortableComponentSet = /* @__PURE__ */ new Set();
 const CSS = {

package/dist/chunks/text.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { html } from "lit";
 import { safeClassMap } from "@arcgis/lumina";
 const CSS = {

package/dist/chunks/useCancelable.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 const useCancelable = () => {
   return makeGenericController((_, controller) => {

package/dist/chunks/useFocusTrap.js

@@ -1,7 +1,19 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { createFocusTrap } from "focus-trap";
-import { r as tabbableOptions, b as focusElement } from "./dom.js";
-import { d as getConfig } from "./runtime.js";
+import { u as tabbableOptions, j as focusElement } from "./dom.js";
+import { a as getConfig } from "./runtime.js";
+function getEffectiveContainerElements(targetEl, { focusTrapOptions }, extraContainers) {
+  if (!focusTrapOptions?.extraContainers && !extraContainers) {
+    return targetEl;
+  }
+  return [targetEl, ...toContainerArray(focusTrapOptions?.extraContainers), ...toContainerArray(extraContainers)];
+}
+function toContainerArray(containers = []) {
+  return Array.isArray(containers) ? containers : [containers];
+}
 const outsideClickDeactivated = /* @__PURE__ */ new WeakSet();
 function defaultSetReturnFocus(hostEl, el) {
   const hasPreviousRelatedFocusedEl = el && el !== document.body && el !== document.documentElement;
@@ -35,15 +47,6 @@ function createFocusTrapOptions(hostEl, options) {
     }
   };
 }
-function getEffectiveContainerElements(targetEl, { focusTrapOptions }, extraContainers) {
-  if (!focusTrapOptions?.extraContainers && !extraContainers) {
-    return targetEl;
-  }
-  return [targetEl, ...toContainerArray(focusTrapOptions?.extraContainers), ...toContainerArray(extraContainers)];
-}
-function toContainerArray(containers = []) {
-  return Array.isArray(containers) ? containers : [containers];
-}
 const useFocusTrap = (options) => {
   return makeGenericController((component, controller) => {
     let focusTrap;
@@ -66,18 +69,26 @@ const useFocusTrap = (options) => {
     });
     controller.onDisconnected(() => utils.deactivate());
     const utils = {
+      get _instance() {
+        if (process.env.NODE_ENV === "test") {
+          return focusTrap;
+        }
+        return void 0;
+      },
       activate: () => {
         const targetEl = focusTrapEl || component.el;
         if (!targetEl.isConnected) {
           return;
         }
         if (!focusTrap) {
-          const effectiveFocusTrapOptions = {
-            ...internalFocusTrapOptions,
-            ...component.focusTrapOptions
-          };
           effectiveContainers ||= getEffectiveContainerElements(targetEl, component);
-          focusTrap = createFocusTrap(effectiveContainers, createFocusTrapOptions(targetEl, effectiveFocusTrapOptions));
+          focusTrap = createFocusTrap(
+            effectiveContainers,
+            createFocusTrapOptions(targetEl, {
+              ...internalFocusTrapOptions,
+              ...component.focusTrapOptions
+            })
+          );
         }
         if (typeof component.focusTrapDisabledOverride === "function" ? !component.focusTrapDisabledOverride() : !component.focusTrapDisabled) {
           focusTrap.activate();

package/dist/chunks/{interactive.js → useInteractive.js}

@@ -1,5 +1,17 @@
-import { html } from "lit-html";
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
+import { makeGenericController } from "@arcgis/lumina/controllers";
 import { safeClassMap } from "@arcgis/lumina";
+import { html } from "lit";
+const CSS = {
+  container: "interaction-container"
+};
+const InteractiveContainer = ({ children, disabled }) => html`<div class=${safeClassMap(CSS.container)} .inert=${disabled}>${children}</div>`;
+const useInteractive = makeGenericController((component, controller) => {
+  controller.onUpdated(() => updateHostInteraction(component));
+  return InteractiveContainer;
+});
 function interceptedClick() {
   const { disabled } = this;
   if (!disabled) {
@@ -49,11 +61,6 @@ function removeInteractionListeners(element) {
   element.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions);
   nonBubblingWhenDisabledMouseEvents.forEach((event) => element.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions));
 }
-const CSS = {
-  container: "interaction-container"
-};
-const InteractiveContainer = ({ children, disabled }) => html`<div class=${safeClassMap(CSS.container)} .inert=${disabled}>${children}</div>`;
 export {
-  InteractiveContainer as I,
-  updateHostInteraction as u
+  useInteractive as u
 };

package/dist/chunks/usePreventDocumentScroll.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 let openedComponentCount = 0;
 let initialDocumentOverflowStyle = "";

package/dist/chunks/useSetFocus.js

@@ -1,6 +1,9 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { c as componentFocusable } from "./component.js";
-import { m as getRootNode, b as focusElement } from "./dom.js";
+import { h as getRootNode, j as focusElement } from "./dom.js";
 const useSetFocus = () => {
   return makeGenericController((component, controller) => {
     let abortController;

package/dist/chunks/useT9n.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { makeT9nController } from "@arcgis/lumina/controllers";
 import { g as getAssetPath } from "./runtime.js";
 const useT9n = makeT9nController(getAssetPath);

package/dist/chunks/useTime.js

@@ -1,6 +1,9 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { toFunction, GenericController } from "@arcgis/lumina/controllers";
 import { createEvent } from "@arcgis/lumina";
-import { l as localizedTwentyFourHourMeridiems, i as isValidNumber, n as numberStringFormatter, g as getDateTimeFormat, a as getSupportedNumberingSystem } from "./locale.js";
+import { l as localizedTwentyFourHourMeridiems, i as isValidNumber, n as numberStringFormatter, g as getDateTimeFormat, b as getSupportedNumberingSystem } from "./locale.js";
 import { d as decimalPlaces, g as getDecimals } from "./math.js";
 import { c as capitalizeWord } from "./text.js";
 import { n as numberKeys } from "./key.js";
@@ -8,7 +11,7 @@ const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter({
   locale,
   numberingSystem,
-  includeSeconds = true,
+  includeSeconds,
   fractionalSecondDigits,
   hour12
 }) {
@@ -111,10 +114,16 @@ function getLocalizedDecimalSeparator(locale, numberingSystem) {
   };
   return numberStringFormatter.localize("1.1").split("")[1];
 }
-function getLocalizedTimePartSuffix(part, locale, numberingSystem = "latn") {
-  const formatter = createLocaleDateTimeFormatter({ locale, numberingSystem });
+function getLocalizedTimePartSuffix({
+  hour12,
+  locale,
+  numberingSystem = "latn",
+  part,
+  step
+}) {
+  const formatter = createLocaleDateTimeFormatter({ hour12, includeSeconds: step < 60, locale, numberingSystem });
   const parts = formatter.formatToParts(new Date(Date.UTC(0, 0, 0, 0, 0, 0)));
-  return getLocalizedTimePart(`${part}Suffix`, parts);
+  return getLocalizedTimePart(`${part}Suffix`, parts, locale);
 }
 function getLocalizedTimePart(part, parts, locale = "en") {
   if (!part || !parts) {
@@ -124,24 +133,23 @@ function getLocalizedTimePart(part, parts, locale = "en") {
     const hourIndex = parts.indexOf(parts.find(({ type }) => type === "hour"));
     const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
     const hourSuffix = parts[hourIndex + 1];
-    return hourSuffix && hourSuffix.type === "literal" && minuteIndex - hourIndex === 2 ? hourSuffix.value?.trim() || null : null;
+    return hourSuffix?.type === "literal" && minuteIndex - hourIndex === 2 ? hourSuffix.value || null : null;
   }
   if (part === "minuteSuffix") {
     const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
-    const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
     const minuteSuffix = parts[minuteIndex + 1];
-    return minuteSuffix && minuteSuffix.type === "literal" && secondIndex - minuteIndex === 2 ? minuteSuffix.value?.trim() || null : null;
+    return minuteSuffix?.type === "literal" ? minuteSuffix.value || null : null;
   }
   if (part === "secondSuffix") {
     let secondSuffixPart;
     const fractionalSecondIndex = parts.indexOf(parts.find(({ type }) => type === "fractionalSecond"));
-    if (fractionalSecondIndex) {
+    if (fractionalSecondIndex !== -1) {
       secondSuffixPart = parts[fractionalSecondIndex + 1];
     } else {
       const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
       secondSuffixPart = parts[secondIndex + 1];
     }
-    return secondSuffixPart?.type === "literal" && secondSuffixPart.value?.trim() || null;
+    return secondSuffixPart?.type === "literal" && secondSuffixPart.value || null;
   }
   if (part === "meridiem") {
     const meridiemFromBrowser = parts.find(({ type }) => type === "dayPeriod")?.value || null;
@@ -259,13 +267,13 @@ function localizeTimePart({
   if (!date) {
     return;
   }
-  const formatter = createLocaleDateTimeFormatter({ hour12, locale, numberingSystem });
+  const includeSeconds = ["second", "fractionalSecond"].includes(part);
+  const formatter = createLocaleDateTimeFormatter({ hour12, includeSeconds, locale, numberingSystem });
   const parts = formatter.formatToParts(date);
   return getLocalizedTimePart(part, parts, locale);
 }
 function localizeTimeString({
   hour12,
-  includeSeconds = true,
   locale,
   numberingSystem = "latn",
   parts: toParts = false,
@@ -276,6 +284,7 @@ function localizeTimeString({
     return null;
   }
   const { hour, minute, second = "0", fractionalSecond } = parseTimeString(value, step);
+  const includeSeconds = step < 60;
   const dateFromTimeString = new Date(
     Date.UTC(
       0,
@@ -283,8 +292,8 @@ function localizeTimeString({
       0,
       parseInt(hour),
       parseInt(minute),
-      parseInt(second),
-      fractionalSecond && fractionalSecondPartToMilliseconds(fractionalSecond)
+      includeSeconds && parseInt(second),
+      includeSeconds && fractionalSecond && fractionalSecondPartToMilliseconds(fractionalSecond)
     )
   );
   const formatter = createLocaleDateTimeFormatter({
@@ -674,13 +683,11 @@ class TimeController extends GenericController {
   }
   setHourFormat() {
     const { hourFormat, messages } = this.component;
-    const locale = messages._lang;
-    this.hourFormat = hourFormat === "user" ? getLocaleHourFormat(locale) : hourFormat;
+    this.hourFormat = hourFormat === "user" ? getLocaleHourFormat(messages._lang) : hourFormat;
   }
   setMeridiemOrder() {
     const { messages } = this.component;
-    const locale = messages._lang;
-    this.meridiemOrder = getMeridiemOrder(locale);
+    this.meridiemOrder = getMeridiemOrder(messages._lang);
   }
   setValue(value, userChangedValue = false) {
     const { messages, numberingSystem, step, value: previousValue } = this.component;
@@ -730,13 +737,25 @@ class TimeController extends GenericController {
       this.fractionalSecond = null;
       this.meridiem = null;
       this.localizedHour = null;
-      this.localizedHourSuffix = getLocalizedTimePartSuffix("hour", locale, numberingSystem);
+      this.localizedHourSuffix = getLocalizedTimePartSuffix({ hour12, part: "hour", locale, numberingSystem, step });
       this.localizedMinute = null;
-      this.localizedMinuteSuffix = getLocalizedTimePartSuffix("minute", locale, numberingSystem);
+      this.localizedMinuteSuffix = getLocalizedTimePartSuffix({
+        hour12,
+        part: "minute",
+        locale,
+        numberingSystem,
+        step
+      });
       this.localizedSecond = null;
       this.localizedDecimalSeparator = getLocalizedDecimalSeparator(locale, numberingSystem);
       this.localizedFractionalSecond = null;
-      this.localizedSecondSuffix = getLocalizedTimePartSuffix("second", locale, numberingSystem);
+      this.localizedSecondSuffix = getLocalizedTimePartSuffix({
+        hour12,
+        part: "second",
+        locale,
+        numberingSystem,
+        step
+      });
       this.localizedMeridiem = null;
     }
     if (newValue !== previousValue) {