@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.90

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

@@ -3,31 +3,69 @@ 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";
 
-/**
- * @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.
- * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-input-time-picker-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-input-time-picker-border-color": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-input-time-picker-icon-color": "*";
+  /** Specifies the component's icon color when hovered. */
+  "--calcite-input-time-picker-icon-color-hover": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-input-time-picker-shadow": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-input-time-picker-corner-radius": "*";
+  /** Specifies the component's input background color. */
+  "--calcite-input-time-picker-input-background-color": "*";
+  /** Specifies the component's input text color. */
+  "--calcite-input-time-picker-input-text-color": "*";
+  /** Specifies the component's input shadow. */
+  "--calcite-input-time-picker-input-shadow": "*";
+  /** Specifies the component's input border radius. */
+  "--calcite-input-time-picker-input-corner-radius": "*";
+  /** Specifies the component's input border color. */
+  "--calcite-input-time-picker-input-border-color": "*";
+  /** Specifies the component's digit text color. */
+  "--calcite-input-time-picker-digit-text-color": "*";
+  /** Specifies the component's digit icon color. */
+  "--calcite-input-time-picker-digit-icon-color": "*";
+  /** Specifies the component's digit border color when pressed. */
+  "--calcite-input-time-picker-digit-border-color-press": "*";
+  /** Specifies the component's digit border color when hovered. */
+  "--calcite-input-time-picker-digit-border-color-hover": "*";
+  /** Specifies the background color of the component's actions when hovered. */
+  "--calcite-input-time-picker-action-background-color-hover": "*";
+  /** Specifies the background color of the component's actions when active. */
+  "--calcite-input-time-picker-action-background-color-press": "*";
+  /** Specifies the background color of the input's `clearable` element. */
+  "--calcite-input-time-picker-input-action-background-color": "*";
+  /** Specifies the background color of the input's `clearable` element when hovered. */
+  "--calcite-input-time-picker-input-action-background-color-hover": "*";
+  /** Specifies the background color of the input's `clearable` element when pressed. */
+  "--calcite-input-time-picker-input-action-background-color-press": "*";
+  /** Specifies the icon color of the input's `clearable` and toggle elements. */
+  "--calcite-input-time-picker-input-action-icon-color": "*";
+  /** Specifies the icon color of the input's `clearable` and toggle elements when hovered. */
+  "--calcite-input-time-picker-input-action-icon-color-hover": "*";
+  /** Specifies the icon color of the input's `clearable` and toggle elements when pressed. */
+  "--calcite-input-time-picker-input-action-icon-color-press": "*";
+}
+}
+
+/** @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 +81,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 +101,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 +133,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 +148,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,19 +4,23 @@ 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";
 import { i as isValidNumber } from "../../chunks/locale.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.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}`;
+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;min-inline-size:min-content}: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-sm))}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-input-time-picker-input-action-background-color));--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",
@@ -52,7 +56,7 @@ class InputTimePicker extends LitElement {
     this.messages = useT9n();
     this.containerRef = createRef();
     this.direction = useDirection();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.formSupport = useForm({
       inputType: "time"
     })(this);
@@ -65,6 +69,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 +86,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 +94,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 +114,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 +140,6 @@ class InputTimePicker extends LitElement {
       }
     }
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   blurHandler() {
     this.changeEventHandler();
   }
@@ -177,6 +175,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 +311,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,7 +329,8 @@ class InputTimePicker extends LitElement {
     const showSecond = this.step < 60;
     const meridiemStart = meridiemOrder === 0 || this.direction === "rtl";
     const isInteractive = !this.disabled && !this.readOnly;
-    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({
+    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-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({
@@ -345,7 +352,7 @@ class InputTimePicker extends LitElement {
       [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";