feat(time-picker): apply consistent styling for floating elements

packages/calcite-components/src/components/input-time-picker/input-time-picker.scss

@@ -122,5 +122,10 @@
   }
 }
 
+calcite-time-picker {
+  --calcite-time-picker-border-color: transparent;
+  --calcite-time-picker-corner-radius: var(--calcite-corner-radius-round);
+}
+
 @include form-validation-message();
 @include base-component();

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

@@ -681,12 +681,14 @@ export class InputTimePicker
           focusTrapOptions={{ initialFocus: false }}
           label={messages.chooseTime}
           lang={this.messages._lang}
+          offsetDistance={0}
           oncalcitePopoverBeforeClose={this.popoverBeforeCloseHandler}
           oncalcitePopoverBeforeOpen={this.popoverBeforeOpenHandler}
           oncalcitePopoverClose={this.popoverCloseHandler}
           oncalcitePopoverOpen={this.popoverOpenHandler}
           overlayPositioning={this.overlayPositioning}
           placement={this.placement}
+          pointer-disabled={true}
           ref={this.setCalcitePopoverEl}
           referenceElement={this.containerEl}
           triggerDisabled={true}

packages/calcite-components/src/components/time-picker/time-picker.e2e.ts

@@ -1489,6 +1489,10 @@ describe("calcite-time-picker", () => {
           state: "hover",
           shadowSelector: `.${CSS.input}`,
         },
+        "--calcite-time-picker-border-color": {
+          targetProp: "borderColor",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
       });
     });
 

packages/calcite-components/src/components/time-picker/time-picker.scss

@@ -4,6 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-time-picker-background-color: Specifies the background color of the time picker.
+ * @prop --calcite-time-picker-border-color: Specifies the border color of the time picker.
  * @prop --calcite-time-picker-corner-radius: Specifies the border radius of the time picker.
  * @prop --calcite-time-picker-button-background-color-hover: Specifies the button's background color when hovered or focused.
  * @prop --calcite-time-picker-button-background-color-press: Specifies the button's background color when active.
@@ -19,11 +20,12 @@
 
 .time-picker {
   @apply flex
-    shadow-2
     select-none
     items-center
+    border-solid
+    border
     font-medium;
-
+  border-color: var(--calcite-time-picker-border-color, var(--calcite-color-border-3));
   border-radius: var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));
   color: var(--calcite-time-picker-color, var(--calcite-color-text-1));
   background-color: var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));

packages/calcite-components/src/custom-theme/time-picker.ts

@@ -9,6 +9,7 @@ export const timePickerTokens = {
   calciteTimePickerIconColor: "",
   calciteTimePickerInputBorderColorPress: "",
   calciteTimePickerInputBorderColorHover: "",
+  calciteTimePickerBorderColor: "",
 };
 
 export const timePicker = html`<calcite-time-picker></calcite-time-picker>`;