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

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

@@ -5,12 +5,14 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
-import { b as setRequestedIcon } from "../../chunks/dom.js";
+import { v as setRequestedIcon } from "../../chunks/dom.js";
 import { u as useForm } from "../../chunks/useForm.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+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 { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -23,6 +25,9 @@ const CSS = {
   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",
   inputIcon: "icon",
   prefix: "prefix",
   suffix: "suffix",
@@ -36,29 +41,55 @@ 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)}.action-wrapper{order:7;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{background-color:transparent;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 .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}.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}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}: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-spacing-xxs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-spacing-sm-plus)}`;
+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))}`;
 class InputText extends LitElement {
   constructor() {
     super();
     this.actionWrapperRef = createRef();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged);
     this.childRef = createRef();
+    this.enableInlineEditingButtonRef = createRef();
     this.direction = useDirection();
     this.inputWrapperRef = createRef();
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.formSupport = useForm({
       inputType: "text"
     })(this);
     this.interactiveContainer = useInteractive(this);
+    this.inlineEditableManager = new UseInlineEditable({
+      getEditingEnabled: () => this.editingEnabled,
+      setEditingEnabled: (editingEnabled) => {
+        this.editingEnabled = editingEnabled;
+      },
+      getValue: () => this.value,
+      setValue: (value) => {
+        this.setValue({ origin: "direct", value });
+      },
+      setFocus: () => {
+        void this.setFocus();
+      },
+      emitCancel: () => {
+        this.calciteInputTextInlineEditableCancel.emit();
+      },
+      emitConfirm: () => {
+        this.calciteInputTextInlineEditableConfirm.emit();
+      },
+      emitEnableEditingChange: () => {
+        this.calciteInputTextInlineEditableChange.emit();
+      }
+    });
+    this.inlineEditableLoading = false;
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
     this.clearable = false;
     this.disabled = false;
     this.editingEnabled = false;
+    this.inlineEditable = false;
+    this.inlineEditableControls = false;
     this.iconFlipRtl = false;
     this.loading = false;
     this.readOnly = false;
@@ -69,11 +100,15 @@ class InputText extends LitElement {
     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 = { 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 }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { 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, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    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 };
   }
   static {
     this.formAssociated = true;
@@ -81,6 +116,15 @@ class InputText extends LitElement {
   static {
     this.styles = styles;
   }
+  get selfManagedInlineEditable() {
+    return this.inlineEditable && !this.inlineEditableEl;
+  }
+  get hasInlineEditableContext() {
+    return this.inlineEditable || !!this.inlineEditableEl;
+  }
+  get inlineEditableEnabledInContext() {
+    return this.inlineEditableEl ? this.inlineEditableEl.editingEnabled : this.editingEnabled;
+  }
   get isClearable() {
     return this.clearable && this.value.length > 0;
   }
@@ -106,7 +150,6 @@ class InputText extends LitElement {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    connectLabel(this);
   }
   async load() {
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
@@ -118,10 +161,6 @@ class InputText extends LitElement {
       this.requestedIcon = setRequestedIcon({}, this.icon, "text");
     }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
   }
@@ -139,7 +178,19 @@ class InputText extends LitElement {
     if (this.readOnly || this.disabled || event.defaultPrevented) {
       return;
     }
-    if (this.isClearable && event.key === "Escape") {
+    if (this.selfManagedInlineEditable && this.editingEnabled && event.key === "Escape") {
+      event.preventDefault();
+      if (this.clearable && this.value?.length > 0) {
+        this.clearInputTextValue(event);
+        return;
+      }
+      this.inlineEditableManager.cancelEditing();
+      requestAnimationFrame(() => {
+        this.enableInlineEditingButtonRef.value?.setFocus();
+      });
+      return;
+    }
+    if (this.isClearable && event.key === "Escape" && (!this.hasInlineEditableContext || this.inlineEditableEnabledInContext)) {
       this.clearInputTextValue(event);
       event.preventDefault();
     }
@@ -149,6 +200,10 @@ class InputText extends LitElement {
     }
   }
   onLabelClick() {
+    if (this.selfManagedInlineEditable && !this.editingEnabled) {
+      this.inlineEditableManager.enable();
+      return;
+    }
     this.setFocus();
   }
   clearInputTextValue(nativeEvent) {
@@ -170,6 +225,9 @@ class InputText extends LitElement {
       element: this.childRef.value,
       value: this.value
     });
+    if (this.selfManagedInlineEditable && this.editingEnabled && !this.inlineEditableControls) {
+      this.inlineEditableManager.disable();
+    }
     this.emitChangeIfUserModified();
   }
   clickHandler(event) {
@@ -177,7 +235,13 @@ class InputText extends LitElement {
       return;
     }
     const composedPath = event.composedPath();
-    if (!composedPath.includes(this.inputWrapperRef.value) || composedPath.includes(this.actionWrapperRef.value)) {
+    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) {
+      return;
+    }
+    if (this.selfManagedInlineEditable && !this.editingEnabled) {
+      event.preventDefault();
+      this.inlineEditableManager.enable();
       return;
     }
     this.setFocus();
@@ -244,16 +308,20 @@ class InputText extends LitElement {
     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.editingEnabled,
-      [CSS.inlineChild]: !!this.inlineEditableEl
-    })} 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.inlineEditableEl && !this.editingEnabled ? -1 : void 0) ?? nothing} type=text .value=${live(this.value ?? "")} ${ref(this.childRef)}>`;
+      [CSS.editingEnabled]: this.inlineEditableEnabledInContext,
+      [CSS.inlineChild]: this.hasInlineEditableContext,
+      [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)}>`;
     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><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.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}` });
   }
 }
 customElement("calcite-input-text", InputText);

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

@@ -3,8 +3,8 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HourFormat } from "../../utils/time.js";
-import type { Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { TimePicker } from "../calcite-time-picker/customElement.js";
 
 /**
@@ -25,9 +25,21 @@ import type { TimePicker } from "../calcite-time-picker/customElement.js";
  * @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`.
  */
 export abstract class InputTimePicker extends LitElement {
+  /**
+   * When `true`, displays a clear button when the component has a value.
+   *
+   * @default false
+   */
+  accessor clearable: boolean;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -43,11 +55,11 @@ export abstract class InputTimePicker extends LitElement {
   /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /**
-   * Specifies the component's hour format, where:
+   * Specifies the component's hour format.
    *
-   * `"user"` displays the user's locale format,
-   * `"12"` displays a 12-hour format, and
-   * `"24"` displays a 24-hour format.
+   * - `"user"` displays the user's locale format.
+   * - `"12"` displays a 12-hour format.
+   * - `"24"` displays a 24-hour format.
    *
    * @default "user"
    */
@@ -63,25 +75,30 @@ export abstract class InputTimePicker extends LitElement {
    * @see [MDN - max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
    */
   accessor max: string | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      chooseTime?: string;
-      fractionalSecond?: string;
-      fractionalSecondDown?: string;
-      fractionalSecondUp?: string;
-      hour?: string;
-      hourDown?: string;
-      hourUp?: string;
-      meridiem?: string;
-      meridiemDown?: string;
-      meridiemUp?: string;
-      minute?: string;
-      minuteDown?: string;
-      minuteUp?: string;
-      required?: string;
-      second?: string;
-      secondDown?: string;
-      secondUp?: string;
+      chooseTime?: string | undefined;
+      clear?: string | undefined;
+      fractionalSecond?: string | undefined;
+      fractionalSecondDown?: string | undefined;
+      fractionalSecondUp?: string | undefined;
+      hour?: string | undefined;
+      hourDown?: string | undefined;
+      hourUp?: string | undefined;
+      meridiem?: string | undefined;
+      meridiemDown?: string | undefined;
+      meridiemUp?: string | undefined;
+      minute?: string | undefined;
+      minuteDown?: string | undefined;
+      minuteUp?: string | undefined;
+      required?: string | undefined;
+      second?: string | undefined;
+      secondDown?: string | undefined;
+      secondUp?: string | undefined;
   } & TimePicker["messageOverrides"];
   /**
    * When the component resides in a form,
@@ -90,7 +107,11 @@ export abstract class InputTimePicker extends LitElement {
    * @see [MDN - min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
    */
   accessor min: string | undefined;
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem;
@@ -101,11 +122,11 @@ export abstract class InputTimePicker extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -4,9 +4,11 @@ import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { d as decimalPlaces } from "../../chunks/math.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 { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -15,8 +17,9 @@ 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";
-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}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}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-none));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}.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}.toggle-icon{--calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));align-items:center;block-size:24px;cursor:pointer;display:flex;inline-size:24px;justify-content:center}.toggle-icon:hover{--calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover, var(--calcite-color-text-1))}: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]) .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=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([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-round) )}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}`;
+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",
   clockIcon: "clock-icon",
   container: "container",
   contentContainer: "content-container",
@@ -65,6 +68,7 @@ class InputTimePicker extends LitElement {
     this.interactiveContainer = useInteractive(this);
     this.timePickerRef = createRef();
     this.hasFocus = false;
+    this.clearable = false;
     this.disabled = false;
     this.focusTrapDisabled = false;
     this.hourFormat = "user";
@@ -81,6 +85,7 @@ class InputTimePicker extends LitElement {
     this.calciteInputTimePickerChange = createEvent();
     this.calciteInputTimePickerClose = createEvent({ cancelable: false });
     this.calciteInputTimePickerOpen = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("blur", this.blurHandler);
     this.listen("focus", this.focusHandler);
     this.listen("focusout", this.focusOutHandler);
@@ -88,7 +93,7 @@ class InputTimePicker extends LitElement {
     this.listen("calciteTimeChange", this.timeChangeHandler);
   }
   static {
-    this.properties = { hasFocus: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hourFormat: [3, {}, { reflect: true }], label: 1, labelText: 1, max: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], name: 1, numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: 1, placeholder: 1, placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { hasFocus: [16, {}, { state: true }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hourFormat: [3, {}, { reflect: true }], label: 1, labelText: 1, max: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], name: 1, numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: 1, placeholder: 1, placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -108,10 +113,6 @@ class InputTimePicker extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.el, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
   willUpdate(changes) {
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
       this.openHandler();
@@ -138,10 +139,6 @@ class InputTimePicker extends LitElement {
       }
     }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   blurHandler() {
     this.changeEventHandler();
   }
@@ -177,6 +174,9 @@ class InputTimePicker extends LitElement {
     } else if (this.open && key === "Escape") {
       this.open = false;
       event.preventDefault();
+    } else if (!this.disabled && !this.readOnly && this.clearable && this.value && key === "Escape") {
+      this.clearValue();
+      event.preventDefault();
     } else {
       const showFractionalSecond = decimalPlaces(this.step) > 0;
       const showSecond = this.step < 60;
@@ -310,6 +310,11 @@ class InputTimePicker extends LitElement {
   toggleIconClickHandler() {
     this.open = !this.open;
   }
+  clearValue() {
+    this.time.setValue(null, true);
+    this.open = false;
+    this.changeEventHandler();
+  }
   render() {
     const { messages, readOnly, scale } = this;
     const { fractionalSecond, handleHourKeyDownEvent, handleMinuteKeyDownEvent, handleSecondKeyDownEvent, handleFractionalSecondKeyDownEvent, hour, hourFormat, localizedDecimalSeparator, localizedFractionalSecond, localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, meridiemOrder, minute, second } = this.time;
@@ -323,29 +328,30 @@ class InputTimePicker extends LitElement {
     const showSecond = this.step < 60;
     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({
       [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({
       [CSS.inputContainer]: true,
       [CSS.inputContainerHidden]: this.showPlaceholder
-    })} dir=ltr id=${IDS.inputContainer} role=group>${showMeridiem && meridiemStart && this.renderMeridiem() || ""}<span aria-label=${this.messages.hour ?? nothing} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(hourIsNumber && parseInt(hour) || "0") ?? nothing} aria-valuetext=${hour ?? nothing} class=${safeClassMap({
+    })} dir=ltr id=${IDS.inputContainer} role=group>${showMeridiem && meridiemStart && this.renderMeridiem() || ""}<span aria-label=${this.messages.hour ?? nothing} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(hourIsNumber && parseInt(hour, 10) || "0") ?? nothing} aria-valuetext=${hour ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedHour,
       [CSS.hour]: true,
       [CSS.input]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleHourKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || emptyPlaceholder}</span><span class=${safeClassMap(CSS.hourSuffix)}>${localizedHourSuffix}</span><span aria-label=${this.messages.minute ?? nothing} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(minuteIsNumber && parseInt(minute) || "0") ?? nothing} aria-valuetext=${minute ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleHourKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || emptyPlaceholder}</span><span class=${safeClassMap(CSS.hourSuffix)}>${localizedHourSuffix}</span><span aria-label=${this.messages.minute ?? nothing} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(minuteIsNumber && parseInt(minute, 10) || "0") ?? nothing} aria-valuetext=${minute ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedMinute,
       [CSS.input]: true,
       [CSS.minute]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMinuteKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || emptyPlaceholder}</span><span class=${safeClassMap(CSS.minuteSuffix)}>${localizedMinuteSuffix}</span>${showSecond && html`<span aria-label=${this.messages.second ?? nothing} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(secondIsNumber && parseInt(second) || "0") ?? nothing} aria-valuetext=${second ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMinuteKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || emptyPlaceholder}</span><span class=${safeClassMap(CSS.minuteSuffix)}>${localizedMinuteSuffix}</span>${showSecond && html`<span aria-label=${this.messages.second ?? nothing} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(secondIsNumber && parseInt(second, 10) || "0") ?? nothing} aria-valuetext=${second ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedSecond,
       [CSS.input]: true,
       [CSS.second]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || emptyPlaceholder}</span>` || ""}${showFractionalSecond && html`<span class=${safeClassMap(CSS.decimalSeparator)}>${localizedDecimalSeparator}</span>` || ""}${showFractionalSecond && html`<span aria-label=${this.messages.fractionalSecond ?? nothing} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(fractionalSecondIsNumber && parseInt(fractionalSecond) || "0") ?? nothing} aria-valuetext=${localizedFractionalSecond ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || emptyPlaceholder}</span>` || ""}${showFractionalSecond && html`<span class=${safeClassMap(CSS.decimalSeparator)}>${localizedDecimalSeparator}</span>` || ""}${showFractionalSecond && html`<span aria-label=${this.messages.fractionalSecond ?? nothing} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(fractionalSecondIsNumber && parseInt(fractionalSecond, 10) || "0") ?? nothing} aria-valuetext=${localizedFractionalSecond ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedFractionalSecond,
       [CSS.fractionalSecond]: true,
       [CSS.input]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleFractionalSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(decimalPlaces(this.step), "-")}</span>` || ""}${localizedSecondSuffix && html`<span class=${safeClassMap(CSS.secondSuffix)}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && !meridiemStart && this.renderMeridiem() || ""}</div></div>${!this.readOnly && this.renderToggleIcon(this.open) || ""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{ initialFocus: false }} .label=${messages.chooseTime} lang=${this.messages._lang ?? nothing} offset-distance=0 @calcitePopoverBeforeClose=${this.popoverBeforeCloseHandler} @calcitePopoverBeforeOpen=${this.popoverBeforeOpenHandler} @calcitePopoverClose=${this.popoverCloseHandler} @calcitePopoverOpen=${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${ref(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat ?? void 0} lang=${this.messages._lang ?? nothing} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} @calciteTimePickerChange=${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open ? void 0 : -1) ?? nothing} .time=${this.time} .value=${this.value} ${ref(this.timePickerRef)}></calcite-time-picker></calcite-popover>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleFractionalSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(decimalPlaces(this.step), "-")}</span>` || ""}${localizedSecondSuffix && html`<span class=${safeClassMap(CSS.secondSuffix)}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && !meridiemStart && this.renderMeridiem() || ""}</div></div>${isClearable && html`<div class=${safeClassMap(CSS.clearButton)} @click=${this.clearValue}>${ClearButton({ ariaLabel: this.messages.clear, scale: this.scale, title: this.messages.clear })}</div>` || ""}${!this.readOnly && this.renderToggleIcon(this.open) || ""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{ initialFocus: false }} .label=${messages.chooseTime} lang=${this.messages._lang ?? nothing} offset-distance=0 @calcitePopoverBeforeClose=${this.popoverBeforeCloseHandler} @calcitePopoverBeforeOpen=${this.popoverBeforeOpenHandler} @calcitePopoverClose=${this.popoverCloseHandler} @calcitePopoverOpen=${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${ref(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat ?? void 0} lang=${this.messages._lang ?? nothing} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} @calciteTimePickerChange=${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open ? void 0 : -1) ?? nothing} .time=${this.time} .value=${this.value} ${ref(this.timePickerRef)}></calcite-time-picker></calcite-popover>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderMeridiem() {
     const { handleMeridiemKeyDownEvent, localizedMeridiem, meridiem } = this.time;

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

@@ -1,3 +1,4 @@
+import "../calcite-action/index.js";
 import "../calcite-input-message/index.js";
 import "../calcite-icon/index.js";
 import "../calcite-popover/index.js";