@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/es/components/text-field/daikin-text-field.js

@@ -5,7 +5,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -28,12 +28,13 @@ const cvaInput = cva(
     "items-center",
     "w-full",
     "h-full",
-    "pl-(--pl,1rem)",
-    "pr-(--pr,1rem)",
+    "pl-(--pl,calc(var(--dds-padding-30)+0.25rem))",
+    "pr-(--pr,calc(var(--dds-padding-30)+0.25rem))",
     "bg-ddt-color-common-background-default",
     "relative",
     "rounded-sm",
     "overflow-hidden",
+    "text-(length:--dds-font-size-400)",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",
@@ -68,22 +69,30 @@ const cvaInput = cva(
       },
       leftIcon: {
         false: [],
-        true: []
+        true: [
+          "[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+var(--dds-space-100))]"
+        ]
       },
       rightIcon: {
         false: [],
-        true: []
+        true: [
+          "[--pr:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10))]"
+        ]
       },
       type: {
         text: [],
-        number: ["[--pr:5.5rem]"],
-        password: ["[--pr:2.75rem]"],
+        number: [
+          "[--pr:calc(var(--dds-icon-button)*2+0.25rem+var(--dds-padding-20))]"
+        ],
+        password: [
+          "[--pr:calc(var(--dds-gap-20)+var(--dds-icon-button)+var(--dds-padding-20))]"
+        ],
         email: [],
         tel: [],
         search: [
           "[&::-webkit-search-cancel-button]:appearance-none",
-          "[--pl:2.75rem]",
-          "[--pr:2.75rem]"
+          "[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+0.25rem)]",
+          "[--pr:calc(0.25rem+var(--dds-padding-30)+1.5rem)]"
         ]
       }
     },
@@ -106,8 +115,8 @@ const cvaIcon = cva(
   {
     variants: {
       icon: {
-        left: ["left-3"],
-        right: ["right-3"]
+        left: ["left-(--dds-padding-30)"],
+        right: ["right-(--dds-padding-30)"]
       },
       disabled: {
         false: ["text-ddt-color-common-text-primary"],
@@ -116,7 +125,7 @@ const cvaIcon = cva(
     }
   }
 );
-const cvaShowPasswordIcon = cva(["size-6"], {
+const cvaShowPasswordIcon = cva(["size-(--dds-icon)"], {
   variants: {
     showPassword: {
       false: ["icon-[daikin--password-hidden]"],
@@ -134,6 +143,7 @@ let DaikinTextField = class extends DDSFormElement {
     this.minlength = null;
     this.maxlength = null;
     this.step = null;
+    this.stepMode = "free";
     this.min = null;
     this.max = null;
     this.pattern = null;
@@ -219,8 +229,9 @@ let DaikinTextField = class extends DDSFormElement {
     }
   }
   _updateNumberValue(sign) {
-    const newValue = updateNumberValue(this.value || "0", sign, {
+    const newValue = updateNumberValue(this.value, sign, {
       step: this.step,
+      stepMode: this.stepMode,
       min: this.min,
       max: this.max
     });
@@ -249,7 +260,7 @@ let DaikinTextField = class extends DDSFormElement {
     >
       <slot
         name="left-icon"
-        class="icon-size-6"
+        class="icon-size-token"
         @slotchange=${this._handleSlotChange}
       ></slot>
     </span>`;
@@ -261,48 +272,56 @@ let DaikinTextField = class extends DDSFormElement {
     >
       <slot
         name="right-icon"
-        class="icon-size-6"
+        class="icon-size-token"
         @slotchange=${this._handleSlotChange}
       ></slot>
     </span>`;
     switch (this.type) {
       case "number":
         return html`${leftIconSlot}
-          <span class="inline-flex items-center gap-1 absolute right-2">
-            <daikin-icon-button
-              color="neutral"
-              variant="ghost"
-              ?disabled=${this.disabled}
-              button-aria-label="Decrease"
-              tabindex="-1"
-              @click=${() => this._updateNumberValue(-1)}
-            >
-              <span class="icon-[daikin--number-minus] size-6"></span>
-            </daikin-icon-button>
-            <daikin-icon-button
+        ${this.readonly && !this.disabled ? nothing : html`<span class="inline-flex items-center gap-1 absolute right-2">
+              <daikin-icon-button
+                class="size-(--dds-icon-button)"
+                color="neutral"
+                variant="ghost"
+                ?disabled=${this.disabled}
+                button-aria-label="Decrease"
+                tabindex="-1"
+                @click=${() => this._updateNumberValue(-1)}
+              >
+                <span
+                  class="icon-[daikin--number-minus] size-(--dds-icon)"
+                ></span>
+              </daikin-icon-button>
+              <daikin-icon-button
+                class="size-(--dds-icon-button)"
+                color="neutral"
+                variant="ghost"
+                ?disabled=${this.disabled}
+                button-aria-label="Increase"
+                tabindex="-1"
+                @click=${() => this._updateNumberValue(1)}
+              >
+                <span
+                  class="icon-[daikin--number-plus] size-(--dds-icon)"
+                ></span>
+              </daikin-icon-button>
+            </span>`}`;
+      case "password":
+        return html`${leftIconSlot}${this.readonly && !this.disabled ? nothing : html`<daikin-icon-button
               color="neutral"
               variant="ghost"
               ?disabled=${this.disabled}
-              button-aria-label="Increase"
-              tabindex="-1"
-              @click=${() => this._updateNumberValue(1)}
+              button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
+              class="absolute right-(--dds-padding-20) size-(--dds-icon-button)"
+              @click=${this._handleShowPasswordClick}
             >
-              <span class="icon-[daikin--number-plus] size-6"></span>
-            </daikin-icon-button>
-          </span>`;
-      case "password":
-        return html`${leftIconSlot}<daikin-icon-button
-            color="neutral"
-            variant="ghost"
-            ?disabled=${this.disabled}
-            button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
-            class="absolute right-3"
-            @click=${this._handleShowPasswordClick}
-          >
-            <span
-              class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
-            ></span>
-          </daikin-icon-button>`;
+              <span
+                class=${cvaShowPasswordIcon({
+          showPassword: this.showPassword
+        })}
+              ></span>
+            </daikin-icon-button>`}`;
       case "search":
         return html`<span
             class=${cvaIcon({
@@ -310,17 +329,17 @@ let DaikinTextField = class extends DDSFormElement {
           disabled: this.disabled
         })}
           >
-            <span class="icon-[daikin--search] size-6"></span>
+            <span class="icon-[daikin--search] size-(--dds-icon)"></span>
           </span>
-          ${!!this.value && !!this.value.length ? html`<daikin-icon-button
+          ${!!this.value && !!this.value.length && !this.readonly ? html`<daikin-icon-button
                 color="neutral"
                 variant="ghost"
                 ?disabled=${this.disabled}
                 button-aria-label="Clear"
-                class="absolute right-3 size-6"
+                class="absolute right-(--dds-padding-30) size-6"
                 @click=${this._handleClearClick}
               >
-                <span class="icon-[daikin--close] size-6"></span>
+                <span class="icon-[daikin--close] size-(--dds-icon)"></span>
               </daikin-icon-button>` : nothing}`;
       default:
         return html`${leftIconSlot}${rightIconSlot}`;
@@ -386,6 +405,7 @@ let DaikinTextField = class extends DDSFormElement {
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -397,7 +417,7 @@ DaikinTextField.styles = css`
     :host {
       display: flex;
       align-items: center;
-      height: 3rem;
+      height: var(--dds-input-height, 3rem);
       position: relative;
     }
 
@@ -408,6 +428,23 @@ DaikinTextField.styles = css`
     input::-ms-clear {
       display: none !important;
     }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true, fallbackValue: "text" })
@@ -436,6 +473,15 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTextField.prototype, "step", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "free",
+    isAllowedValue: oneOf(["free", "snap"]),
+    attribute: "step-mode"
+  })
+], DaikinTextField.prototype, "stepMode", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTextField.prototype, "min", 2);

package/dist/es/components/text-field/number-utils.d.ts

@@ -4,6 +4,13 @@
 export interface NumberUpdateOptions {
     /** Step increment/decrement amount */
     step?: string | null;
+    /**
+     * Step mode determines how the value is adjusted when it is not on a step boundary.
+     * - "free": Do not snap to step boundaries; increment/decrement relative to the current value.
+     * - "snap": If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).
+     * Defaults to "free".
+     */
+    stepMode?: "free" | "snap";
     /** Minimum allowed value */
     min?: string | null;
     /** Maximum allowed value */

package/dist/es/components/text-field/number-utils.js

@@ -1,13 +1,39 @@
 import Big from "big.js";
 function updateNumberValue(currentValue, direction, options) {
-  const { step, min, max } = options;
+  const { step, stepMode = "free", min, max } = options;
+  const getDecimalPlaces = (value) => {
+    if (value == null || value === "") {
+      return 0;
+    }
+    const stringValue = typeof value === "number" ? `${value}` : value;
+    const decimalPart = stringValue.split(".")[1];
+    return decimalPart ? decimalPart.length : 0;
+  };
+  const currentDecimalPlaces = getDecimalPlaces(currentValue);
+  const stepDecimalPlaces = getDecimalPlaces(step);
+  const minDecimalPlaces = getDecimalPlaces(min);
+  const maxDecimalPlaces = getDecimalPlaces(max);
+  const outputDecimalPlaces = Math.max(currentDecimalPlaces, stepDecimalPlaces);
   try {
     const current = new Big(currentValue || "0");
     const stepBig = new Big(step || "1");
     const minBig = min != null && min !== "" ? new Big(min) : null;
     const maxBig = max != null && max !== "" ? new Big(max) : null;
+    const isEmptyCurrentValue = currentValue.trim() === "";
+    const formatResult = (value) => {
+      if (minBig !== null && value.eq(minBig)) {
+        return value.toFixed(minDecimalPlaces);
+      }
+      if (maxBig !== null && value.eq(maxBig)) {
+        return value.toFixed(maxDecimalPlaces);
+      }
+      return value.toFixed(outputDecimalPlaces);
+    };
+    if (isEmptyCurrentValue && direction === -1 && minBig) {
+      return formatResult(minBig);
+    }
     if (minBig && maxBig && maxBig.lt(minBig)) {
-      return direction === 1 ? minBig.toString() : maxBig.toString();
+      return direction === 1 ? formatResult(minBig) : formatResult(maxBig);
     }
     const isOnStepBoundary = (value) => {
       const diff = value.sub(minBig ?? 0);
@@ -17,22 +43,21 @@ function updateNumberValue(currentValue, direction, options) {
       const base = minBig || new Big(0);
       const offset = value.sub(base);
       const steps = offset.div(stepBig);
+      const truncated = steps.round(0, Big.roundDown);
       let targetSteps;
       if (dir === 1) {
-        targetSteps = steps.round(0, Big.roundUp);
+        targetSteps = truncated.lt(steps) ? truncated.add(1) : truncated;
       } else {
-        targetSteps = steps.round(0, Big.roundDown);
+        targetSteps = truncated.gt(steps) ? truncated.sub(1) : truncated;
       }
       return base.add(targetSteps.mul(stepBig));
     };
     const isInRange = (!minBig || current.gte(minBig)) && (!maxBig || current.lte(maxBig));
-    if (!isInRange || !isOnStepBoundary(current)) {
-      if (!isInRange) {
-        const isBelowMin = minBig && current.lt(minBig);
-        const isAboveMax = maxBig && current.gt(maxBig);
-        if (isBelowMin && direction === -1 || isAboveMax && direction === 1) {
-          return currentValue;
-        }
+    if (!isInRange) {
+      const isBelowMin = minBig && current.lt(minBig);
+      const isAboveMax = maxBig && current.gt(maxBig);
+      if (isBelowMin && direction === -1 || isAboveMax && direction === 1) {
+        return currentValue;
       }
       let nearestStep = findNearestStepInDirection(current, direction);
       if (minBig && nearestStep.lt(minBig)) {
@@ -41,17 +66,24 @@ function updateNumberValue(currentValue, direction, options) {
       if (maxBig && nearestStep.gt(maxBig)) {
         nearestStep = maxBig;
       }
-      return nearestStep.toString();
+      return formatResult(nearestStep);
     }
-    const newValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
-    let result = newValue;
-    if (minBig && result.lt(minBig)) {
-      result = minBig;
+    const steppedValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
+    if (minBig && steppedValue.lt(minBig) || maxBig && steppedValue.gt(maxBig)) {
+      return currentValue;
+    }
+    if (!isOnStepBoundary(current) && stepMode === "snap") {
+      const nearestStep = findNearestStepInDirection(current, direction);
+      if (minBig && nearestStep.lt(minBig) || maxBig && nearestStep.gt(maxBig)) {
+        return currentValue;
+      }
+      return formatResult(nearestStep);
     }
-    if (maxBig && result.gt(maxBig)) {
-      result = maxBig;
+    const newValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
+    if (minBig && newValue.lt(minBig) || maxBig && newValue.gt(maxBig)) {
+      return currentValue;
     }
-    return result.toString();
+    return formatResult(newValue);
   } catch (error) {
     return currentValue;
   }

package/dist/es/components/text-masked-field/daikin-text-masked-field.js

@@ -30,6 +30,7 @@ const cvaInput = cva(
     "relative",
     "rounded-sm",
     "overflow-hidden",
+    "text-(length:--dds-font-size-400)",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",
@@ -62,12 +63,12 @@ const cvaInput = cva(
         true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
       },
       leftIcon: {
-        false: ["pl-4"],
-        true: ["pl-11"]
+        false: ["pl-(--dds-padding-40)"],
+        true: ["pl-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
       },
       rightIcon: {
-        false: ["pr-4"],
-        true: ["pr-11"]
+        false: ["pr-(--dds-padding-40)"],
+        true: ["pr-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
       }
     }
   }
@@ -181,7 +182,7 @@ let DaikinTextMaskedField = class extends DDSFormElement {
       >
         <slot
           name="left-icon"
-          class="icon-size-6"
+          class="icon-size-token"
           @slotchange=${this._handleSlotChange}
         ></slot>
       </span>
@@ -193,7 +194,7 @@ let DaikinTextMaskedField = class extends DDSFormElement {
       >
         <slot
           name="right-icon"
-          class="icon-size-6"
+          class="icon-size-token"
           @slotchange=${this._handleSlotChange}
         ></slot>
       </span>`;
@@ -246,6 +247,7 @@ let DaikinTextMaskedField = class extends DDSFormElement {
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -257,10 +259,32 @@ DaikinTextMaskedField.styles = css`
     :host {
       display: flex;
       align-items: center;
-      height: 3rem;
+      height: var(--dds-input-height, 3rem);
       position: relative;
     }
 
+    ::slotted(daikin-icon[slot="left-icon"]),
+    ::slotted(daikin-icon[slot="right-icon"]) {
+      --ddc-icon-size: var(--dds-icon, 20px);
+    }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
+
     input::-ms-reveal {
       display: none !important;
     }

package/dist/es/components/time-picker/daikin-time-picker.d.ts

@@ -14,16 +14,24 @@ type TimeParts = {
  */
 type TimeItem = "hour" | "minute";
 /**
- * Converts a 12-hour time string and AM/PM to 24-hour format (e.g. "02:30", "PM" => "14:30").
+ * Hour cycle for time input UI.
+ * - h12: 12-hour UI (01:00〜12:59) + AM/PM dropdown.
+ * - h23: 24-hour UI (00:00〜23:59) without AM/PM dropdown.
  */
-export declare function to24HourFormat(time: string, meridiem: "AM" | "PM"): string;
-/**
- * Converts a 24-hour time string to 12-hour format and AM/PM (e.g. "14:30" => { time: "02:30", meridiem: "PM" }).
- */
-export declare function from24HourFormat(time: string): {
-    time: string;
+type HourCycle = "h12" | "h23";
+type UiTimeObject = {
+    hourCycle: "h12";
+    hour: string;
+    minute: string;
     meridiem: "AM" | "PM";
+} | {
+    hourCycle: "h23";
+    hour: string;
+    minute: string;
+    meridiem: null;
 };
+export declare function uiToTimeValue(object: UiTimeObject): string;
+export declare function timeValueToUI(time: string, hourCycle: HourCycle): UiTimeObject;
 /**
  * Validates if a time string matches the 24-hour format.
  */
@@ -60,13 +68,16 @@ export declare function getTimeItemInSelection(selectionStart: number, selection
  * Calculate digit key input, returns new time parts and whether input is complete.
  * @returns { parts, done } or null
  */
-export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeItem, digit: string, hourDigitIndex: number): {
+export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeItem, digit: string, hourDigitIndex: number, hourCycle: HourCycle): {
     parts: TimeParts;
     done: boolean;
 } | null;
 /**
- * The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format.
- * Please note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format.
+ * The time picker provides a time input field and supports two hour cycles via `hourCycle`.
+ * - h12: input in 12-hour format with AM/PM dropdown.
+ * - h23: input in 24-hour format without AM/PM dropdown.
+ *
+ * Please note that the component's `value` is always stored in 24-hour format.
  *
  * @attr form - The form the component belongs to.
  * @attr name - The form name, submitted as a name/value pair when submitting the form.
@@ -98,14 +109,16 @@ export declare class DaikinTimePicker extends DDSFormElement {
     placeholder: string;
     /**
      * Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.
-     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.
+     * Please note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.
+     * The `min` property must be provided in 24-hour format.
      *
      * @default "00:00"
      */
     min: string;
     /**
      * Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.
-     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.
+     * Please note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.
+     * The `max` property must be provided in 24-hour format.
      *
      * @default "23:59"
      */
@@ -114,6 +127,11 @@ export declare class DaikinTimePicker extends DDSFormElement {
      * Whether the field is disabled. Controlled by daikin-input-group.
      */
     disabled: boolean;
+    /**
+     * Whether the field is readonly.
+     * When readonly, the user cannot change the value.
+     */
+    readonly: boolean;
     /**
      * Whether the field is required. Controlled by daikin-input-group.
      */
@@ -122,28 +140,48 @@ export declare class DaikinTimePicker extends DDSFormElement {
      * Whether to show error state. Controlled by daikin-input-group. Ignored if disabled.
      */
     error: boolean;
+    /**
+     * Hour cycle for the UI.
+     * - h12: input uses 12-hour UI + AM/PM dropdown.
+     * - h23: input uses 24-hour UI and hides AM/PM dropdown.
+     *
+     * @default "h12"
+     */
+    hourCycle: HourCycle;
     /**
      * Minutes step. Specify the step size for the minutes when using the up and down arrow keys.
      *
      * @default "1"
      */
     minutesStep: string;
+    /**
+     * Whether AM/PM dropdown should be single-open across sibling time pickers in the same root.
+     */
+    meridiemSingleOpen: boolean;
     private _label;
     private _inputValue;
     private _currentSelection;
     private _meridiem;
     /**
      * Returns the value to be displayed in the input field.
-     * - If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display.
+     * - If the main value is a valid 24-hour time, returns a display string based on the selected hour cycle.
      * - If the current input value is not valid or meridiem is empty, returns the raw input value.
      * - Otherwise, returns null.
      */
     private get _value();
     private _timeInputElement;
+    private _meridiemDropdown;
     /**
      * Tracks the current digit index for hour input (0: first digit, 1: second digit).
      */
     private _hourDigitIndex;
+    private _preCompositionValue;
+    /**
+     * Tracks the current digit index for minute input (0: first digit, 1: second digit).
+     * When 0 (fresh entry), always starts with "0X" regardless of the existing value,
+     * preventing pre-existing values like "04" from being mistaken as a first-digit state.
+     */
+    private _minuteDigitIndex;
     /**
      * Returns the value to display in the input field (from _inputValue state).
      */
@@ -160,16 +198,21 @@ export declare class DaikinTimePicker extends DDSFormElement {
     private _handleChange;
     private _handleMouseUp;
     private _handleDigitInput;
+    private _handleCompositionStart;
+    private _handleCompositionEnd;
+    private _applyDigits;
     private _handleKeyDown;
     private _updateTimeByOffset;
     private _handleBeforeInput;
     /**
-     * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format.
+     * Updates the value in 24-hour format if the input is valid, while preserving the selected UI hour cycle.
      */
     private _updateValue;
     private _updateInputSelection;
     private _updateSelection;
     private _handleDropdownChange;
+    private _closeMeridiemDropdown;
+    private _handleMeridiemDropdownToggle;
     /**
      * Focuses on the inner time input.
      * @param options focus options