@esri/calcite-components 5.2.0-next.70 → 5.2.0-next.72

package/dist/components/calcite-input-text/customElement.d.ts

@@ -4,33 +4,6 @@ import type { Alignment, Scale, Status } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 
 /**
- * @cssproperty [--calcite-input-action-background-color] - Specifies the background color of the component's `clearable` element.
- * @cssproperty [--calcite-input-action-background-color-hover] - Specifies the background color of the component's `clearable` element when hovered.
- * @cssproperty [--calcite-input-action-background-color-press] - Specifies the background color of the component's `clearable` element when pressed.
- * @cssproperty [--calcite-input-action-icon-color] - Specifies the icon color of the component's `clearable` element.
- * @cssproperty [--calcite-input-action-icon-color-hover] - Specifies the icon color of the component's `clearable` element when hovered.
- * @cssproperty [--calcite-input-action-icon-color-press] - Specifies the icon color of the component's `clearable` element when pressed.
- * @cssproperty [--calcite-input-loading-background-color] - When `loading`, specifies the background color of the component`s `loading` element.
- * @cssproperty [--calcite-input-loading-fill-color] - When `loading`, specifies the fill color of the component`s `loading` element.
- * @cssproperty [--calcite-input-text-inline-editable-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component, its inline editable elements and slotted `calcite-action` wrappers, when hovered.
- * @cssproperty [--calcite-input-text-inline-editable-control-background-color] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls.
- * @cssproperty [--calcite-input-text-inline-editable-control-background-color-hover] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when hovered.
- * @cssproperty [--calcite-input-text-inline-editable-control-background-color-press] - When `inline-editable` is enabled, specifies the background color of the component's inline editable controls, when pressed.
- * @cssproperty [--calcite-input-text-inline-editable-control-corner-radius] - When `inline-editable` is enabled, specifies the corner radius of the component's inline editable controls.
- * @cssproperty [--calcite-input-text-inline-editable-control-loader-color] - When `inline-editable` is enabled, specifies the loader color of the component's inline editable controls.
- * @cssproperty [--calcite-input-text-inline-editable-control-text-color] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls.
- * @cssproperty [--calcite-input-text-inline-editable-control-text-color-press] - When `inline-editable` is enabled, specifies the text color of the component's inline editable controls, when pressed or hovered.
- * @cssproperty [--calcite-input-prefix-size-x] - When `prefixText` is provided, specifies the width of the component's prefix element.
- * @cssproperty [--calcite-input-prefix-text-color] - When `prefixText` is provided, specifies the text color of the component's prefix element.
- * @cssproperty [--calcite-input-suffix-size-x] - When `suffixText` is provided, specifies the width of the component's suffix element.
- * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the color of the component's suffix element.
- * @cssproperty [--calcite-input-text-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-input-text-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-input-text-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-input-text-icon-color] - Specifies the component's `icon` color.
- * @cssproperty [--calcite-input-text-placeholder-text-color] - Specifies the component's `placeholder` text color.
- * @cssproperty [--calcite-input-text-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-input-text-text-color-focus] - Specifies the component's text color when focused.
  * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -76,19 +49,19 @@ export abstract class InputText extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /**
-   * When `true`, enables the component's built-in inline editable behavior.
+   * Enables built-in inline editing. Set to `"controls-disabled"` to hide save and cancel controls.
    *
    * @default false
    */
-  accessor inlineEditable: boolean;
-  /** Specifies a callback to be executed when saving inline editable changes */
-  accessor inlineEditableAfterConfirm: () => Promise<void>;
+  accessor inlineEdit: boolean | "controls-disabled";
   /**
-   * When `true` and `inlineEditable` is `true`, displays the component's built-in inline editable save and cancel controls.
+   * When `true`, the component displays its inline editing mode.
    *
    * @default false
    */
-  accessor inlineEditableControls: boolean;
+  accessor inlineEditing: boolean;
+  /** Specifies an optional callback to be executed when saving inline editing changes, inline edit controls must be present */
+  accessor inlineEditingBeforeConfirm: (() => Promise<void>) | undefined;
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
   /** Specifies the component's label text. */
@@ -201,19 +174,19 @@ export abstract class InputText extends LitElement {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires each time a new `value` is typed and committed. */
   readonly calciteInputTextChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editable is cancelled. */
-  readonly calciteInputTextInlineEditableCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editable is enabled. */
-  readonly calciteInputTextInlineEditableChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when built-in inline editable is confirmed. */
-  readonly calciteInputTextInlineEditableConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editing is cancelled. */
+  readonly calciteInputTextInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when built-in inline editing is enabled or disabled. */
+  readonly calciteInputTextInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires after built-in inline editing confirmation completes. */
+  readonly calciteInputTextInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires each time a new `value` is typed. */
   readonly calciteInputTextInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputTextChange: InputText["calciteInputTextChange"]["detail"];
-    calciteInputTextInlineEditableCancel: InputText["calciteInputTextInlineEditableCancel"]["detail"];
-    calciteInputTextInlineEditableChange: InputText["calciteInputTextInlineEditableChange"]["detail"];
-    calciteInputTextInlineEditableConfirm: InputText["calciteInputTextInlineEditableConfirm"]["detail"];
+    calciteInputTextInlineEditingCancel: InputText["calciteInputTextInlineEditingCancel"]["detail"];
+    calciteInputTextInlineEditingChange: InputText["calciteInputTextInlineEditingChange"]["detail"];
+    calciteInputTextInlineEditingConfirm: InputText["calciteInputTextInlineEditingConfirm"]["detail"];
     calciteInputTextInput: InputText["calciteInputTextInput"]["detail"];
   };
 }

package/dist/components/calcite-input-text/customElement.js

@@ -12,7 +12,7 @@ import { u as useLabel } from "../../chunks/useLabel.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { U as UseInlineEditable, C as CSS$1, I as InlineEditableControls } from "../../chunks/useInlineEditable.js";
+import { U as UseInlineEdit, i as inlineEditConverter, C as CSS$1, I as InlineEditControls } from "../../chunks/useInlineEdit.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -21,13 +21,13 @@ const CSS = {
   loader: "loader",
   clearable: "clearable",
   clearButton: "clear-button",
-  editingEnabled: "editing-enabled",
+  inlineEditing: "inline-editing",
   hasPrefix: "has-prefix",
   hasSuffix: "has-suffix",
   inlineChild: "inline-child",
   inlineEditableChild: "inline-editable-child",
   // `calcite-inline-editable` deprecated in v5.2.0, removal target v7.0.0
-  inlineEditable: "inline-editable",
+  inlineEdit: "inline-edit",
   inputIcon: "icon",
   prefix: "prefix",
   suffix: "suffix",
@@ -41,7 +41,7 @@ const IDS = {
 const SLOTS = {
   action: "action"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;--calcite-internal-input-text-focus-outline-color: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([scale=s]){--calcite-internal-input-text-icon-padding-inline: var(--calcite-spacing-fixed-sm)}:host([scale=s]) input{padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-sm))}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .has-prefix input{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=s]) .prefix{padding-inline:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-xxs)))}:host([scale=s]) .suffix{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s]) .action-wrapper{block-size:1.5rem}:host([scale=s]) .clear-button{block-size:var(--calcite-spacing-xxl)}:host([scale=m]){--calcite-internal-input-text-icon-padding-inline: var(--calcite-spacing-fixed-md)}:host([scale=m]) input{padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-md))}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .has-prefix input{padding-inline-start:var(--calcite-spacing-xs)}:host([scale=m]) .prefix{padding-inline:var(--calcite-spacing-md) var(--calcite-spacing-xs)}:host([scale=m]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-xs)))}:host([scale=m]) .suffix{padding-inline:var(--calcite-spacing-xs) var(--calcite-spacing-md)}:host([scale=m]) .action-wrapper{block-size:2rem}:host([scale=l]){--calcite-internal-input-text-icon-padding-inline: var(--calcite-spacing-fixed-lg)}:host([scale=l]) input{padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-lg))}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .has-prefix input{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .prefix{padding-inline:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=l]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-sm)))}:host([scale=l]) .suffix{padding-inline:var(--calcite-spacing-sm) var(--calcite-spacing-lg)}:host([scale=l]) .action-wrapper{block-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing),block-size 0,outline-offset 0s;-webkit-appearance:none;position:relative;margin:0;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-style:solid;font-family:inherit;font-weight:var(--calcite-font-weight-normal);outline:none;background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-text-text-color, var(--calcite-color-text-1));border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));text-align:var(--calcite-internal-input-text-alignment);border-inline-start-width:var(--calcite-internal-input-text-input-border-inline-start-width, var(--calcite-border-width-sm));border-inline-end-width:var(--calcite-internal-input-text-input-border-inline-end-width, var(--calcite-border-width-sm));border-block-start-width:var(--calcite-internal-input-text-input-border-block-start-width, var(--calcite-border-width-sm));border-block-end-width:var(--calcite-internal-input-text-input-border-block-end-width, var(--calcite-border-width-sm))}input:placeholder-shown{text-overflow:ellipsis}.element-wrapper,input{border-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}.has-prefix input,.element-wrapper:has(.icon) input{border-start-start-radius:0;border-end-start-radius:0;--calcite-internal-input-text-input-border-inline-start-width: var(--calcite-border-width-none)}.element-wrapper:has(.clear-button) input,.has-suffix input{border-start-end-radius:0;border-end-end-radius:0;--calcite-internal-input-text-input-border-inline-end-width: var(--calcite-border-width-none)}.has-prefix .prefix,.element-wrapper:not(:has(.prefix)):has(.icon) .icon{border-start-start-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-end-start-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}.has-suffix .suffix,:host([clearable]) .clear-button{border-end-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-start-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}:host([clearable]) .has-suffix .clear-button{border-end-end-radius:0;border-start-end-radius:0}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-input-text-text-color-focus, var(--calcite-color-text-1))}input[readonly]{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-input-text-background-color, var(--calcite-color-background))}input[readonly]:focus{color:var(--calcite-input-text-text-color-focus, var(--calcite-color-text-1))}:host([read-only]) .prefix,:host([read-only]) .icon,:host([read-only]) .clear-button,:host([read-only]) .suffix{background-color:var(--calcite-input-text-background-color, var(--calcite-color-background))}calcite-icon{color:var(--calcite-input-action-icon-color, var(--calcite-color-text-3))}.element-wrapper{position:relative;display:inline-flex;flex:1 1 0%;align-items:center;isolation:isolate;order:3}.element-wrapper:has(input:focus){outline:var(--calcite-border-width-md) solid var(--calcite-internal-input-text-focus-outline-color);outline-offset:calc(var(--calcite-border-width-sm) * -2)}.element-wrapper:has(input:focus) input{z-index:calc(var(--calcite-z-index) * -1)}:host([status=invalid]) .prefix,:host([status=invalid]) .icon,:host([status=invalid]) input,:host([status=invalid]) .clear-button,:host([status=invalid]) .suffix{border-color:var(--calcite-color-status-danger)}:host([status=invalid]){--calcite-internal-input-text-focus-outline-color: var(--calcite-color-status-danger)}.icon{box-sizing:border-box;display:flex;align-self:stretch;border-style:solid;border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-text-icon-color, var(--calcite-color-text-3));align-items:center;padding-inline-start:var(--calcite-internal-input-text-icon-padding-inline);border-block-start-width:var(--calcite-internal-input-text-icon-border-block-start-width, var(--calcite-border-width-sm));border-inline-end-width:var(--calcite-internal-input-text-icon-border-inline-end-width, var(--calcite-border-width-none));border-block-end-width:var(--calcite-internal-input-text-icon-border-block-end-width, var(--calcite-border-width-sm));border-inline-start-width:var(--calcite-internal-input-text-icon-border-inline-start-width, var(--calcite-border-width-sm))}.has-prefix .icon{--calcite-internal-input-text-icon-border-inline-start-width: var(--calcite-border-width-none)}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}.clear-button{box-sizing:border-box;display:flex;align-self:stretch;order:4;border-width:var(--calcite-border-width-sm);border-style:solid;border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));border-inline-start-width:var(--calcite-border-width-none);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1))}.has-suffix .clear-button{border-inline-end-width:0}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.loader calcite-progress{--calcite-progress-background-color: var(--calcite-input-loading-background-color);--calcite-progress-fill-color: var(--calcite-input-loading-fill-color)}.inline-editable{order:7}.action-wrapper{order:8;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;line-height:1;font-weight:var(--calcite-font-weight-regular);border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input))}.prefix{order:0;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size-x, auto);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-prefix-text-color, var(--calcite-color-text-2))}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size-x, auto);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-suffix-text-color, var(--calcite-color-text-2))}:host([alignment=start]){--calcite-internal-input-text-alignment: start}:host([alignment=center]){--calcite-internal-input-text-alignment: center}:host([alignment=end]){--calcite-internal-input-text-alignment: end}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}input.inline-child.inline-editable-child{background-color:transparent}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.element-wrapper:has(input.inline-child:not(.editing-enabled)) .loader,.element-wrapper:has(input.inline-child:not(.editing-enabled)) .prefix,.element-wrapper:has(input.inline-child:not(.editing-enabled)) .icon,.element-wrapper:has(input.inline-child:not(.editing-enabled)) .clear-button,.element-wrapper:has(input.inline-child:not(.editing-enabled)) .suffix{display:none}:host([inline-editable]:not([editing-enabled])) .wrapper:hover input,:host([inline-editable]:not([editing-enabled])) .wrapper:hover .inline-editable,:host([inline-editable]:not([editing-enabled])) .wrapper:hover .action-wrapper,:host:has(input.inline-child:not(.inline-editable-child):not(.editing-enabled)) .wrapper:hover input,:host:has(input.inline-child:not(.inline-editable-child):not(.editing-enabled)) .wrapper:hover .inline-editable,:host:has(input.inline-child:not(.inline-editable-child):not(.editing-enabled)) .wrapper:hover .action-wrapper{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-input-text-inline-editable-background-color-hover, var(--calcite-color-foreground-2))}:host([inline-editable]) input,:host([inline-editable]) .inline-editable,:host([inline-editable]) .action-wrapper{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-text-placeholder-text-color, var(--calcite-color-text-3))}.clear-button--container{display:flex;cursor:pointer;align-items:center}.clear-button--container:hover calcite-action{--calcite-action-background-color: var(--calcite-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color: var(--calcite-input-action-icon-color-hover, var(--calcite-color-text-1))}.clear-button--container:active calcite-action{--calcite-action-background-color: var(--calcite-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color: var(--calcite-input-action-icon-color-press, var(--calcite-color-text-1))}.clear-button--container calcite-action{--calcite-internal-action-height: 100%;--calcite-internal-action-padding-inline: var(--calcite-spacing-none);--calcite-internal-action-padding-block: var(--calcite-spacing-none);--calcite-action-background-color: var(--calcite-input-action-background-color, var(--calcite-color-foreground-2));--calcite-action-text-color: var(--calcite-input-action-icon-color)}.clear-button--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color-press: var(--calcite-input-action-icon-color-hover)}.clear-button--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color-press: var(--calcite-input-action-icon-color-press)}:host([scale=s]) .clear-button--container{padding:var(--calcite-space-2xs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-space-2xs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-space-sm-plus)}.inline-editable--container{display:flex;cursor:pointer;align-items:center}.inline-editable--container .enable-editing,.inline-editable--container .confirm-changes,.inline-editable--container .cancel-editing{margin-inline-start:var(--calcite-space-2xs)}.inline-editable--container .enable-editing{--calcite-action-text-color: var(--calcite-input-text-inline-editable-control-text-color, var(--calcite-color-text-1))}.inline-editable--container calcite-action{--calcite-action-background-color: var(--calcite-input-text-inline-editable-control-background-color);--calcite-action-corner-radius: var(--calcite-input-text-inline-editable-control-corner-radius);--calcite-action-loader-color: var(--calcite-input-text-inline-editable-control-loader-color);--calcite-action-text-color: var(--calcite-input-text-inline-editable-control-text-color)}.inline-editable--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-input-text-inline-editable-control-background-color-hover, var(--calcite-input-text-inline-editable-control-background-color));--calcite-action-text-color-press: var(--calcite-input-text-inline-editable-control-text-color-press, var(--calcite-input-text-inline-editable-control-text-color))}.inline-editable--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-input-text-inline-editable-control-background-color-press, var(--calcite-input-text-inline-editable-control-background-color));--calcite-action-text-color-press: var(--calcite-input-text-inline-editable-control-text-color-press, var(--calcite-input-text-inline-editable-control-text-color))}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;--calcite-internal-input-text-focus-outline-color: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([scale=s]){--calcite-internal-input-text-icon-padding-inline: var(--calcite-spacing-fixed-sm)}:host([scale=s]) input{padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-sm))}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .has-prefix input{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=s]) .prefix{padding-inline:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-xxs)))}:host([scale=s]) .suffix{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s]) .action-wrapper{block-size:1.5rem}:host([scale=s]) .clear-button{block-size:var(--calcite-spacing-xxl)}:host([scale=m]){--calcite-internal-input-text-icon-padding-inline: var(--calcite-spacing-fixed-md)}:host([scale=m]) input{padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-md))}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .has-prefix input{padding-inline-start:var(--calcite-spacing-xs)}:host([scale=m]) .prefix{padding-inline:var(--calcite-spacing-md) var(--calcite-spacing-xs)}:host([scale=m]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-xs)))}:host([scale=m]) .suffix{padding-inline:var(--calcite-spacing-xs) var(--calcite-spacing-md)}:host([scale=m]) .action-wrapper{block-size:2rem}:host([scale=l]){--calcite-internal-input-text-icon-padding-inline: var(--calcite-spacing-fixed-lg)}:host([scale=l]) input{padding-inline-start:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-internal-input-text-input-padding-inline-end, var(--calcite-spacing-lg))}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .has-prefix input{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .prefix{padding-inline:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=l]) .has-suffix input{padding-inline-end:var(var(--calcite-internal-input-text-input-padding-inline-end), var(var(--calcite-spacing-sm)))}:host([scale=l]) .suffix{padding-inline:var(--calcite-spacing-sm) var(--calcite-spacing-lg)}:host([scale=l]) .action-wrapper{block-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing),block-size 0,outline-offset 0s;-webkit-appearance:none;position:relative;margin:0;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-style:solid;font-family:inherit;font-weight:var(--calcite-font-weight-normal);outline:none;background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-text-text-color, var(--calcite-color-text-1));border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));text-align:var(--calcite-internal-input-text-alignment);border-inline-start-width:var(--calcite-internal-input-text-input-border-inline-start-width, var(--calcite-border-width-sm));border-inline-end-width:var(--calcite-internal-input-text-input-border-inline-end-width, var(--calcite-border-width-sm));border-block-start-width:var(--calcite-internal-input-text-input-border-block-start-width, var(--calcite-border-width-sm));border-block-end-width:var(--calcite-internal-input-text-input-border-block-end-width, var(--calcite-border-width-sm))}input:placeholder-shown{text-overflow:ellipsis}.element-wrapper,input{border-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}.has-prefix input,.element-wrapper:has(.icon) input{border-start-start-radius:0;border-end-start-radius:0;--calcite-internal-input-text-input-border-inline-start-width: var(--calcite-border-width-none)}.element-wrapper:has(.clear-button) input,.has-suffix input{border-start-end-radius:0;border-end-end-radius:0;--calcite-internal-input-text-input-border-inline-end-width: var(--calcite-border-width-none)}.has-prefix .prefix,.element-wrapper:not(:has(.prefix)):has(.icon) .icon{border-start-start-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-end-start-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}.has-suffix .suffix,:host([clearable]) .clear-button{border-end-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp));border-start-end-radius:var(--calcite-input-text-corner-radius, var(--calcite-corner-radius-sharp))}:host([clearable]) .has-suffix .clear-button{border-end-end-radius:0;border-start-end-radius:0}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-input-text-text-color-focus, var(--calcite-color-text-1))}input[readonly]{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-input-text-background-color, var(--calcite-color-background))}input[readonly]:focus{color:var(--calcite-input-text-text-color-focus, var(--calcite-color-text-1))}:host([read-only]) .prefix,:host([read-only]) .icon,:host([read-only]) .clear-button,:host([read-only]) .suffix{background-color:var(--calcite-input-text-background-color, var(--calcite-color-background))}calcite-icon{color:var(--calcite-input-action-icon-color, var(--calcite-color-text-3))}.element-wrapper{position:relative;display:inline-flex;flex:1 1 0%;align-items:center;isolation:isolate;order:3}.element-wrapper:has(input:focus){outline:var(--calcite-border-width-md) solid var(--calcite-internal-input-text-focus-outline-color);outline-offset:calc(var(--calcite-border-width-sm) * -2)}.element-wrapper:has(input:focus) input{z-index:calc(var(--calcite-z-index) * -1)}:host([status=invalid]) .prefix,:host([status=invalid]) .icon,:host([status=invalid]) input,:host([status=invalid]) .clear-button,:host([status=invalid]) .suffix{border-color:var(--calcite-color-status-danger)}:host([status=invalid]){--calcite-internal-input-text-focus-outline-color: var(--calcite-color-status-danger)}.icon{box-sizing:border-box;display:flex;align-self:stretch;border-style:solid;border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-text-icon-color, var(--calcite-color-text-3));align-items:center;padding-inline-start:var(--calcite-internal-input-text-icon-padding-inline);border-block-start-width:var(--calcite-internal-input-text-icon-border-block-start-width, var(--calcite-border-width-sm));border-inline-end-width:var(--calcite-internal-input-text-icon-border-inline-end-width, var(--calcite-border-width-none));border-block-end-width:var(--calcite-internal-input-text-icon-border-block-end-width, var(--calcite-border-width-sm));border-inline-start-width:var(--calcite-internal-input-text-icon-border-inline-start-width, var(--calcite-border-width-sm))}.has-prefix .icon{--calcite-internal-input-text-icon-border-inline-start-width: var(--calcite-border-width-none)}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;block-size:0px;inline-size:0px}.clear-button{box-sizing:border-box;display:flex;align-self:stretch;order:4;border-width:var(--calcite-border-width-sm);border-style:solid;border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input));border-inline-start-width:var(--calcite-border-width-none);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1))}.has-suffix .clear-button{border-inline-end-width:0}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.loader calcite-progress{--calcite-progress-background-color: var(--calcite-input-loading-background-color);--calcite-progress-fill-color: var(--calcite-input-loading-fill-color)}.inline-edit{order:7}.action-wrapper{order:8;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;line-height:1;font-weight:var(--calcite-font-weight-regular);border-color:var(--calcite-input-text-border-color, var(--calcite-color-border-input))}.prefix{order:0;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size-x, auto);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-prefix-text-color, var(--calcite-color-text-2))}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size-x, auto);background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-suffix-text-color, var(--calcite-color-text-2))}:host([alignment=start]){--calcite-internal-input-text-alignment: start}:host([alignment=center]){--calcite-internal-input-text-alignment: center}:host([alignment=end]){--calcite-internal-input-text-alignment: end}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}input.inline-child.inline-editable-child{background-color:transparent}input.inline-child .inline-editing{background-color:inherit}input.inline-child:not(.inline-editing){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.element-wrapper:has(input.inline-child:not(.inline-editing)) .loader,.element-wrapper:has(input.inline-child:not(.inline-editing)) .prefix,.element-wrapper:has(input.inline-child:not(.inline-editing)) .icon,.element-wrapper:has(input.inline-child:not(.inline-editing)) .clear-button,.element-wrapper:has(input.inline-child:not(.inline-editing)) .suffix{display:none}:host([inline-edit]:not([inline-editing])) .wrapper:hover input,:host([inline-edit]:not([inline-editing])) .wrapper:hover .inline-edit,:host([inline-edit]:not([inline-editing])) .wrapper:hover .action-wrapper,:host:has(input.inline-child:not(.inline-editable-child):not(.inline-editing)) .wrapper:hover input,:host:has(input.inline-child:not(.inline-editable-child):not(.inline-editing)) .wrapper:hover .inline-edit,:host:has(input.inline-child:not(.inline-editable-child):not(.inline-editing)) .wrapper:hover .action-wrapper{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-input-text-inline-edit-background-color-hover, var(--calcite-color-foreground-2))}:host([inline-edit]) input,:host([inline-edit]) .inline-edit,:host([inline-edit]) .action-wrapper{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-input-text-background-color, var(--calcite-color-foreground-1))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-text-placeholder-text-color, var(--calcite-color-text-3))}.clear-button--container{display:flex;cursor:pointer;align-items:center}.clear-button--container:hover calcite-action{--calcite-action-background-color: var(--calcite-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color: var(--calcite-input-action-icon-color-hover, var(--calcite-color-text-1))}.clear-button--container:active calcite-action{--calcite-action-background-color: var(--calcite-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color: var(--calcite-input-action-icon-color-press, var(--calcite-color-text-1))}.clear-button--container calcite-action{--calcite-internal-action-height: 100%;--calcite-internal-action-padding-inline: var(--calcite-spacing-none);--calcite-internal-action-padding-block: var(--calcite-spacing-none);--calcite-action-background-color: var(--calcite-input-action-background-color, var(--calcite-color-foreground-2));--calcite-action-text-color: var(--calcite-input-action-icon-color)}.clear-button--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color-press: var(--calcite-input-action-icon-color-hover)}.clear-button--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color-press: var(--calcite-input-action-icon-color-press)}:host([scale=s]) .clear-button--container{padding:var(--calcite-space-2xs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-space-2xs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-space-sm-plus)}.inline-edit--container{display:flex;cursor:pointer;align-items:center}.inline-edit--container .enable-editing,.inline-edit--container .confirm-changes,.inline-edit--container .cancel-editing{margin-inline-start:var(--calcite-space-2xs)}.inline-edit--container .enable-editing{--calcite-action-text-color: var(--calcite-input-text-inline-edit-control-text-color, var(--calcite-color-text-1))}.inline-edit--container calcite-action{--calcite-action-background-color: var(--calcite-input-text-inline-edit-control-background-color);--calcite-action-corner-radius: var(--calcite-input-text-inline-edit-control-corner-radius);--calcite-action-loader-color: var(--calcite-input-text-inline-edit-control-loader-color);--calcite-action-text-color: var(--calcite-input-text-inline-edit-control-text-color)}.inline-edit--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-input-text-inline-edit-control-background-color-hover, var(--calcite-input-text-inline-edit-control-background-color));--calcite-action-text-color-press: var(--calcite-input-text-inline-edit-control-text-color-press, var(--calcite-input-text-inline-edit-control-text-color))}.inline-edit--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-input-text-inline-edit-control-background-color-press, var(--calcite-input-text-inline-edit-control-background-color));--calcite-action-text-color-press: var(--calcite-input-text-inline-edit-control-text-color-press, var(--calcite-input-text-inline-edit-control-text-color))}`;
 class InputText extends LitElement {
   constructor() {
     super();
@@ -60,36 +60,36 @@ class InputText extends LitElement {
       inputType: "text"
     })(this);
     this.interactiveContainer = useInteractive(this);
-    this.inlineEditableManager = new UseInlineEditable({
-      getEditingEnabled: () => this.editingEnabled,
-      setEditingEnabled: (editingEnabled) => {
-        this.editingEnabled = editingEnabled;
+    this.inlineEditManager = new UseInlineEdit({
+      getInlineEditing: () => this.inlineEditing,
+      setInlineEditing: (inlineEditing) => {
+        this.inlineEditing = inlineEditing;
       },
       getValue: () => this.value,
-      setValue: (value) => {
-        this.setValue({ origin: "direct", value });
+      restoreValue: (value) => {
+        this.restoreInlineEditingValue(value);
       },
+      commitValue: () => this.commitInlineEditingValue(),
       setFocus: () => {
         void this.setFocus();
       },
       emitCancel: () => {
-        this.calciteInputTextInlineEditableCancel.emit();
+        this.calciteInputTextInlineEditingCancel.emit();
       },
       emitConfirm: () => {
-        this.calciteInputTextInlineEditableConfirm.emit();
+        this.calciteInputTextInlineEditingConfirm.emit();
       },
       emitEnableEditingChange: () => {
-        this.calciteInputTextInlineEditableChange.emit();
+        this.calciteInputTextInlineEditingChange.emit();
       }
     });
-    this.inlineEditableLoading = false;
+    this.inlineEditingLoading = false;
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
     this.clearable = false;
     this.disabled = false;
-    this.editingEnabled = false;
-    this.inlineEditable = false;
-    this.inlineEditableControls = false;
+    this.inlineEditing = false;
+    this.inlineEdit = false;
     this.iconFlipRtl = false;
     this.loading = false;
     this.readOnly = false;
@@ -97,18 +97,18 @@ class InputText extends LitElement {
     this.scale = "m";
     this.status = "idle";
     this.calciteInputTextChange = createEvent();
+    this.calciteInputTextInlineEditingCancel = createEvent({ cancelable: false });
+    this.calciteInputTextInlineEditingChange = createEvent({ cancelable: false });
+    this.calciteInputTextInlineEditingConfirm = createEvent({ cancelable: false });
     this.calciteInputTextInput = createEvent();
     this.calciteInternalInputTextBlur = createEvent();
     this.calciteInternalInputTextFocus = createEvent();
-    this.calciteInputTextInlineEditableCancel = createEvent({ cancelable: false });
-    this.calciteInputTextInlineEditableConfirm = createEvent({ cancelable: false });
-    this.calciteInputTextInlineEditableChange = createEvent({ cancelable: false });
     useLabel(this);
     this.listen("click", this.clickHandler);
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { inlineEditableLoading: [16, {}, { state: true }], slottedActionElDisabledInternally: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], inlineEditable: [7, {}, { reflect: true, type: Boolean }], inlineEditableControls: [7, {}, { reflect: true, type: Boolean }], inlineEditableAfterConfirm: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { draftValue: [16, {}, { state: true }], inlineEditingLoading: [16, {}, { state: true }], slottedActionElDisabledInternally: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], inlineEditing: [7, {}, { reflect: true, type: Boolean }], inlineEdit: [3, { converter: inlineEditConverter }, { reflect: true }], inlineEditingBeforeConfirm: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -116,17 +116,26 @@ class InputText extends LitElement {
   static {
     this.styles = styles;
   }
-  get selfManagedInlineEditable() {
-    return this.inlineEditable && !this.inlineEditableEl;
+  get selfManagedInlineEdit() {
+    return !!this.inlineEdit && !this.inlineEditableEl;
   }
-  get hasInlineEditableContext() {
-    return this.inlineEditable || !!this.inlineEditableEl;
+  get hasInlineEditContext() {
+    return !!this.inlineEdit || !!this.inlineEditableEl;
   }
-  get inlineEditableEnabledInContext() {
-    return this.inlineEditableEl ? this.inlineEditableEl.editingEnabled : this.editingEnabled;
+  get inlineEditControlsDisabled() {
+    return this.inlineEdit === "controls-disabled";
+  }
+  get inlineEditingEnabledInContext() {
+    return this.inlineEditableEl ? this.inlineEditableEl.editingEnabled : this.inlineEditing;
+  }
+  get isStagingInlineEditingValue() {
+    return this.selfManagedInlineEdit && this.inlineEditing;
+  }
+  get valueForEditing() {
+    return this.draftValue ?? this.value;
   }
   get isClearable() {
-    return this.clearable && this.value.length > 0;
+    return this.clearable && this.valueForEditing.length > 0;
   }
   get value() {
     return this._value;
@@ -147,9 +156,6 @@ class InputText extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.inlineEditableEl = this.el.closest("calcite-inline-editable") ?? void 0;
-    if (this.inlineEditableEl) {
-      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
-    }
   }
   async load() {
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
@@ -178,19 +184,19 @@ class InputText extends LitElement {
     if (this.readOnly || this.disabled || event.defaultPrevented) {
       return;
     }
-    if (this.selfManagedInlineEditable && this.editingEnabled && event.key === "Escape") {
+    if (this.selfManagedInlineEdit && this.inlineEditing && event.key === "Escape") {
       event.preventDefault();
-      if (this.clearable && this.value?.length > 0) {
+      if (this.isClearable) {
         this.clearInputTextValue(event);
         return;
       }
-      this.inlineEditableManager.cancelEditing();
+      this.inlineEditManager.cancelEditing();
       requestAnimationFrame(() => {
         this.enableInlineEditingButtonRef.value?.setFocus();
       });
       return;
     }
-    if (this.isClearable && event.key === "Escape" && (!this.hasInlineEditableContext || this.inlineEditableEnabledInContext)) {
+    if (this.isClearable && event.key === "Escape" && (!this.hasInlineEditContext || this.inlineEditingEnabledInContext)) {
       this.clearInputTextValue(event);
       event.preventDefault();
     }
@@ -200,8 +206,8 @@ class InputText extends LitElement {
     }
   }
   onLabelClick() {
-    if (this.selfManagedInlineEditable && !this.editingEnabled) {
-      this.inlineEditableManager.enable();
+    if (this.selfManagedInlineEdit && !this.inlineEditing) {
+      this.inlineEditManager.enable();
       return;
     }
     this.setFocus();
@@ -214,19 +220,45 @@ class InputText extends LitElement {
       value: ""
     });
   }
+  clearButtonPointerDownHandler(event) {
+    if (this.hasInlineEditContext && this.inlineEditingEnabledInContext) {
+      event.preventDefault();
+    }
+  }
+  commitInlineEditingValue() {
+    const draftValue = this.draftValue;
+    if (draftValue === void 0) {
+      return;
+    }
+    this.draftValue = void 0;
+    if (draftValue !== this.value) {
+      this.previousValueOrigin = "user";
+      this.userChangedValue = true;
+      this.value = draftValue;
+      this.calciteInputTextChange.emit();
+      this.setPreviousEmittedValue(draftValue);
+    }
+  }
   emitChangeIfUserModified() {
+    if (this.isStagingInlineEditingValue) {
+      return;
+    }
     if (this.previousValueOrigin === "user" && this.value !== this.previousEmittedValue) {
       this.calciteInputTextChange.emit();
       this.setPreviousEmittedValue(this.value);
     }
   }
   inputTextBlurHandler() {
+    if (this.isStagingInlineEditingValue && this.inlineEditControlsDisabled) {
+      this.commitInlineEditingValue();
+    }
     this.calciteInternalInputTextBlur.emit({
       element: this.childRef.value,
       value: this.value
     });
-    if (this.selfManagedInlineEditable && this.editingEnabled && !this.inlineEditableControls) {
-      this.inlineEditableManager.disable();
+    if (this.selfManagedInlineEdit && this.inlineEditing && this.inlineEditControlsDisabled) {
+      this.inlineEditManager.disable();
+      this.calciteInputTextInlineEditingChange.emit();
     }
     this.emitChangeIfUserModified();
   }
@@ -235,13 +267,13 @@ class InputText extends LitElement {
       return;
     }
     const composedPath = event.composedPath();
-    const clickedInlineEditableControls = composedPath.some((element) => element instanceof HTMLElement && element.classList.contains(CSS$1.container));
-    if (!composedPath.includes(this.inputWrapperRef.value) || composedPath.includes(this.actionWrapperRef.value) || clickedInlineEditableControls) {
+    const clickedInlineEditControls = composedPath.some((element) => element instanceof HTMLElement && element.classList.contains(CSS$1.container));
+    if (!composedPath.includes(this.inputWrapperRef.value) || composedPath.includes(this.actionWrapperRef.value) || clickedInlineEditControls) {
       return;
     }
-    if (this.selfManagedInlineEditable && !this.editingEnabled) {
+    if (this.selfManagedInlineEdit && !this.inlineEditing) {
       event.preventDefault();
-      this.inlineEditableManager.enable();
+      this.inlineEditManager.enable();
       return;
     }
     this.setFocus();
@@ -252,6 +284,23 @@ class InputText extends LitElement {
       value: this.value
     });
   }
+  focusEnableInlineEditingButton() {
+    void this.updateComplete.then(() => {
+      requestAnimationFrame(() => {
+        void this.enableInlineEditingButtonRef.value?.setFocus();
+      });
+    });
+  }
+  inlineEditCancelEditingHandler() {
+    this.inlineEditManager.cancelEditing();
+    this.focusEnableInlineEditingButton();
+  }
+  async inlineEditConfirmChangesHandler() {
+    await this.inlineEditManager.confirm(this.inlineEditingBeforeConfirm, (loading) => {
+      this.inlineEditingLoading = loading;
+    });
+    this.focusEnableInlineEditingButton();
+  }
   inputTextInputHandler(nativeEvent) {
     if (this.disabled || this.readOnly) {
       return;
@@ -262,11 +311,24 @@ class InputText extends LitElement {
       value: nativeEvent.target.value
     });
   }
-  inputTextKeyDownHandler(event) {
+  async inputTextKeyDownHandler(event) {
     if (this.disabled || this.readOnly) {
       return;
     }
     if (event.key === "Enter") {
+      if (this.isStagingInlineEditingValue) {
+        event.preventDefault();
+        const input = event.currentTarget;
+        if (!this.inlineEditControlsDisabled) {
+          await this.inlineEditManager.confirm(this.inlineEditingBeforeConfirm, (loading) => {
+            this.inlineEditingLoading = loading;
+          });
+          this.focusEnableInlineEditingButton();
+        } else {
+          input.blur();
+        }
+        return;
+      }
       this.emitChangeIfUserModified();
     }
   }
@@ -282,20 +344,31 @@ class InputText extends LitElement {
   setPreviousValue(value) {
     this.previousValue = value;
   }
+  restoreInlineEditingValue(value) {
+    this.draftValue = void 0;
+    this.setInputValue(value);
+  }
   setValue({ committing = false, nativeEvent, origin, previousValue, value }) {
-    this.setPreviousValue(previousValue ?? this.value);
+    const previousDraftValue = this.valueForEditing;
+    const shouldStageValue = origin === "user" && this.isStagingInlineEditingValue;
+    this.setPreviousValue(previousValue ?? previousDraftValue);
     this.previousValueOrigin = origin;
-    this.userChangedValue = origin === "user" && value !== this.value;
-    this.value = value;
+    if (shouldStageValue) {
+      this.draftValue = value;
+    } else {
+      this.userChangedValue = origin === "user" && value !== this.value;
+      this.value = value;
+    }
     if (origin === "direct") {
+      this.draftValue = void 0;
       this.setInputValue(value);
       this.setPreviousEmittedValue(value);
     }
-    if (nativeEvent) {
+    if (nativeEvent && !shouldStageValue) {
       const calciteInputTextInputEvent = this.calciteInputTextInput.emit();
       if (calciteInputTextInputEvent.defaultPrevented) {
         this.value = this.previousValue;
-      } else if (committing) {
+      } else if (committing && !shouldStageValue) {
         this.emitChangeIfUserModified();
       }
     }
@@ -303,25 +376,23 @@ class InputText extends LitElement {
   render() {
     const dir = this.direction;
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
-    const clearButton = html`<div class=${safeClassMap(CSS.clearButton)} @click=${this.disabled || this.readOnly ? void 0 : this.clearInputTextValue}>${ClearButton({ ariaLabel: this.messages.clear, disabled: this.disabled || this.readOnly, scale: this.scale, title: this.messages.clear })}</div>`;
+    const clearButton = html`<div class=${safeClassMap(CSS.clearButton)} @click=${this.disabled || this.readOnly ? void 0 : this.clearInputTextValue} @pointerdown=${this.clearButtonPointerDownHandler}>${ClearButton({ ariaLabel: this.messages.clear, disabled: this.disabled || this.readOnly, scale: this.scale, title: this.messages.clear })}</div>`;
     const iconEl = html`<div class=${safeClassMap(CSS.inputIcon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${getIconScale(this.scale)}></calcite-icon></div>`;
     const prefixText = html`<div class=${safeClassMap(CSS.prefix)}>${this.prefixText}</div>`;
     const suffixText = html`<div class=${safeClassMap(CSS.suffix)}>${this.suffixText}</div>`;
     const childEl = html`<input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${this.el.autofocus} class=${safeClassMap({
-      [CSS.editingEnabled]: this.inlineEditableEnabledInContext,
-      [CSS.inlineChild]: this.hasInlineEditableContext,
+      [CSS.inlineEditing]: this.inlineEditingEnabledInContext,
+      [CSS.inlineChild]: this.hasInlineEditContext,
       [CSS.inlineEditableChild]: !!this.inlineEditableEl
       // `calcite-inline-editable` deprecated in v5.2.0, removal target v7.0.0
-    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${this.name ?? nothing} @blur=${this.inputTextBlurHandler} @focus=${this.inputTextFocusHandler} @input=${this.inputTextInputHandler} @keydown=${this.inputTextKeyDownHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} tabindex=${(this.disabled || this.hasInlineEditableContext && !this.inlineEditableEnabledInContext ? -1 : void 0) ?? nothing} type=text .value=${live(this.value ?? "")} ${ref(this.childRef)}>`;
+    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${this.name ?? nothing} @blur=${this.inputTextBlurHandler} @focus=${this.inputTextFocusHandler} @input=${this.inputTextInputHandler} @keydown=${this.inputTextKeyDownHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} tabindex=${(this.disabled || this.hasInlineEditContext && !this.inlineEditingEnabledInContext ? -1 : void 0) ?? nothing} type=text .value=${live(this.valueForEditing ?? "")} ${ref(this.childRef)}>`;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.clearable]: this.isClearable,
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}</div>${this.selfManagedInlineEditable && html`<div class=${safeClassMap(CSS.inlineEditable)}>${InlineEditableControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, editingEnabled: this.editingEnabled, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, loading: this.inlineEditableLoading, onCancelEditing: () => this.inlineEditableManager.cancelEditing(), onConfirmChanges: () => this.inlineEditableManager.confirm(this.inlineEditableAfterConfirm, (loading) => {
-      this.inlineEditableLoading = loading;
-    }), onEnableEditing: () => this.inlineEditableManager.enable(), scale: this.scale, showControls: this.editingEnabled && this.inlineEditableControls })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}><div class=${safeClassMap(CSS.wrapper)}>${this.loading ? loader : null}${this.prefixText ? prefixText : null}${this.requestedIcon ? iconEl : null}${childEl}${this.isClearable ? clearButton : null}${this.suffixText ? suffixText : null}</div>${this.selfManagedInlineEdit && html`<div class=${safeClassMap(CSS.inlineEdit)}>${InlineEditControls({ cancelEditingLabel: this.messages.cancelInlineEditing, confirmChangesLabel: this.messages.confirmInlineEditingChanges, enableEditingButtonRef: this.enableInlineEditingButtonRef, enableEditingLabel: this.messages.enableInlineEditing, inlineEditing: this.inlineEditing, loading: this.inlineEditingLoading, onCancelEditing: this.inlineEditCancelEditingHandler, onConfirmChanges: this.inlineEditConfirmChangesHandler, onEnableEditing: () => this.inlineEditManager.enable(), scale: this.scale, showControls: this.inlineEditing && !this.inlineEditControlsDisabled })}</div>` || ""}<div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-text", InputText);

package/dist/components/calcite-input-time-picker/customElement.d.ts

@@ -7,32 +7,7 @@ import type { Scale, Status } from "../types.js";
 import type { IconName } from "../calcite-icon/types.js";
 import type { TimePicker } from "../calcite-time-picker/customElement.js";
 
-/**
- * @cssproperty [--calcite-input-time-picker-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-input-time-picker-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-input-time-picker-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-input-time-picker-icon-color-hover] - Specifies the component's icon color when hovered.
- * @cssproperty [--calcite-input-time-picker-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-input-time-picker-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-input-time-picker-input-background-color] - Specifies the component's input background color.
- * @cssproperty [--calcite-input-time-picker-input-text-color] - Specifies the component's input text color.
- * @cssproperty [--calcite-input-time-picker-input-shadow] - Specifies the component's input shadow.
- * @cssproperty [--calcite-input-time-picker-input-corner-radius] - Specifies the component's input border radius.
- * @cssproperty [--calcite-input-time-picker-input-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-input-time-picker-digit-text-color] - Specifies the component's digit text color.
- * @cssproperty [--calcite-input-time-picker-digit-icon-color] - Specifies the component's digit icon color.
- * @cssproperty [--calcite-input-time-picker-digit-border-color-press] - Specifies the component's digit border color when pressed.
- * @cssproperty [--calcite-input-time-picker-digit-border-color-hover] - Specifies the component's digit border color when hovered.
- * @cssproperty [--calcite-input-time-picker-action-background-color-hover] - Specifies the background color of the component's actions when hovered.
- * @cssproperty [--calcite-input-time-picker-action-background-color-press] - Specifies the background color of the component's actions when active.
- * @cssproperty [--calcite-input-time-picker-input-action-background-color] - Specifies the background color of the input's `clearable` element.
- * @cssproperty [--calcite-input-time-picker-input-action-background-color-hover] - Specifies the background color of the input's `clearable` element when hovered.
- * @cssproperty [--calcite-input-time-picker-input-action-background-color-press] - Specifies the background color of the input's `clearable` element when pressed.
- * @cssproperty [--calcite-input-time-picker-input-action-icon-color] - Specifies the icon color of the input's `clearable` and toggle elements.
- * @cssproperty [--calcite-input-time-picker-input-action-icon-color-hover] - Specifies the icon color of the input's `clearable` and toggle elements when hovered.
- * @cssproperty [--calcite-input-time-picker-input-action-icon-color-press] - Specifies the icon color of the input's `clearable` and toggle elements when pressed.
- * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
- */
+/** @slot [label-content] - A slot for rendering content next to the component's `labelText`. */
 export abstract class InputTimePicker extends LitElement {
   /**
    * When `true`, displays a clear button when the component has a value.

package/dist/components/calcite-input-time-picker/customElement.js

@@ -17,6 +17,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTime } from "../../chunks/useTime.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-time-picker{--calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);--calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);--calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);--calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);--calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);--calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press)}.container{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) );align-items:center;background-color:var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));border:1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));border-radius:var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius));box-shadow:var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:flex;color:var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));flex-wrap:nowrap;font-weight:var(--calcite-font-weight-normal);inline-size:100%;padding-block:var(--calcite-spacing-base);-webkit-user-select:none;user-select:none}.container:focus-within{border-color:var(--calcite-color-brand);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.read-only{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.content-container{display:grid;flex-grow:1;justify-content:start}.content-container .input-container,.content-container .placeholder{grid-column:1;grid-row:1}.content-container .input-container--hidden{opacity:0}.clock-icon{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) )}.hour-suffix,.minute-suffix,.second-suffix{white-space:pre}.placeholder{color:var(--calcite-color-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-container{display:flex;flex-grow:1}.input{align-items:center;display:flex;block-size:100%;justify-content:center;min-inline-size:max-content}.input.empty{inline-size:var(--calcite-spacing-xl)}.input:focus,.input:hover:focus{background-color:Highlight;color:HighlightText;outline:2px solid transparent;outline-offset:2px}.clear-button{display:flex;margin-inline-end:calc(var(--calcite-internal-input-time-picker-end-gap) * -1)}.toggle-icon{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-input-time-picker-input-action-icon-color, var(--calcite-color-text-3)) );align-items:center;block-size:100%;cursor:pointer;display:flex;justify-content:center;margin-inline-end:calc(var(--calcite-internal-input-time-picker-toggle-inline-end-offset) * -1);padding-inline:var(--calcite-internal-input-time-picker-toggle-spacing);padding-inline-start:var(--calcite-space-none)}.toggle-icon:hover{--calcite-icon-color: var( --calcite-input-time-picker-icon-color-hover, var(--calcite-input-time-picker-input-action-icon-color-hover, var(--calcite-color-text-1)) )}.toggle-icon:active{--calcite-icon-color: var( --calcite-input-time-picker-icon-color-hover, var(--calcite-input-time-picker-input-action-icon-color-press, var(--calcite-color-text-1)) )}:host([scale=s]){--calcite-internal-input-time-picker-end-gap: var(--calcite-space-sm);--calcite-internal-input-time-picker-toggle-spacing: var(--calcite-space-2xs);--calcite-internal-input-time-picker-toggle-inline-end-offset: var(--calcite-space-2xs)}:host([scale=s]) .container{block-size:1.5rem;font-size:var(--calcite-font-size-sm);gap:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .input-container,:host([scale=s]) .placeholder{line-height:1rem}:host([scale=m]){--calcite-internal-input-time-picker-end-gap: var(--calcite-space-md);--calcite-internal-input-time-picker-toggle-spacing: var(--calcite-space-sm);--calcite-internal-input-time-picker-toggle-inline-end-offset: var(--calcite-space-sm)}:host([scale=m]) .container{block-size:2rem;font-size:var(--calcite-font-size);gap:var(--calcite-spacing-md);padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .input-container,:host([scale=m]) .placeholder{line-height:1.5rem}:host([scale=m]) .clear-button{block-size:var(--calcite-space-3xl)}:host([scale=l]){--calcite-internal-input-time-picker-end-gap: var(--calcite-space-lg);--calcite-internal-input-time-picker-toggle-spacing: var(--calcite-space-sm-plus);--calcite-internal-input-time-picker-toggle-inline-end-offset: var(--calcite-space-lg)}:host([scale=l]) .container{block-size:2.75rem;font-size:var(--calcite-font-size-md);gap:var(--calcite-spacing-lg);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .input-container,:host([scale=l]) .placeholder{line-height:2.25rem}:host([scale=l]) .clear-button{block-size:var(--calcite-space-4xl)}:host([status=invalid]) .container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) .container:focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-time-picker{--calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);--calcite-time-picker-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius))}calcite-popover{--calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}.clear-button--container{display:flex;cursor:pointer;align-items:center}.clear-button--container:hover calcite-action{--calcite-action-background-color: var(--calcite-input-time-picker-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color: var(--calcite-input-time-picker-input-action-icon-color-hover, var(--calcite-color-text-1))}.clear-button--container:active calcite-action{--calcite-action-background-color: var(--calcite-input-time-picker-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color: var(--calcite-input-time-picker-input-action-icon-color-press, var(--calcite-color-text-1))}.clear-button--container calcite-action{--calcite-internal-action-height: 100%;--calcite-internal-action-padding-inline: var(--calcite-spacing-none);--calcite-internal-action-padding-block: var(--calcite-spacing-none);--calcite-action-background-color: var(--calcite-input-time-picker-input-action-background-color, var(--calcite-color-foreground-2));--calcite-action-text-color: var(--calcite-input-time-picker-input-action-icon-color)}.clear-button--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-input-time-picker-input-action-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color-press: var(--calcite-input-time-picker-input-action-icon-color-hover)}.clear-button--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-input-time-picker-input-action-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color-press: var(--calcite-input-time-picker-input-action-icon-color-press)}:host([scale=s]) .clear-button--container{padding:var(--calcite-space-2xs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-space-2xs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-space-sm-plus)}.clear-button--container calcite-action{--calcite-icon-color: currentColor}`;
 const CSS = {
   clearButton: "clear-button",
@@ -329,7 +330,7 @@ class InputTimePicker extends LitElement {
     const meridiemStart = meridiemOrder === 0 || this.direction === "rtl";
     const isInteractive = !this.disabled && !this.readOnly;
     const isClearable = this.clearable && !!this.value && isInteractive;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-controls=${IDS.inputContainer} aria-labelledby=${IDS.inputContainer} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-controls=${IDS.inputContainer} aria-expanded=${toAriaBoolean(this.open) ?? nothing} aria-labelledby=${IDS.inputContainer} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.readOnly]: readOnly
     })} role=combobox ${ref(this.containerRef)}><calcite-icon class=${safeClassMap(CSS.clockIcon)} .icon=${ICONS.clock} .scale=${scale === "l" ? "m" : "s"}></calcite-icon><div class=${safeClassMap(CSS.contentContainer)}>${this.showPlaceholder && html`<div class=${safeClassMap(CSS.placeholder)}>${this.placeholder}</div>` || ""}<div aria-label=${getLabelText(this) ?? nothing} .ariaRequired=${this.required} class=${safeClassMap({