@esri/calcite-components 1.0.0-next.319 → 1.0.0-next.322

package/dist/collection/components/calcite-button/calcite-button.js

@@ -105,13 +105,14 @@ export class CalciteButton {
   render() {
     const dir = getElementDir(this.el);
     const Tag = this.childElType;
-    const loader = (h("div", { class: CSS.buttonLoader }, this.hasLoader ? (h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" })) : null));
+    const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader },
+      h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
     const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const contentEl = (h("span", { class: CSS.content },
       h("slot", null)));
     return (h(Tag, { "aria-label": getLabelText(this), class: { [CSS_UTILITY.rtl]: dir === "rtl", [CSS.contentSlotted]: this.hasContent }, disabled: this.disabled || this.loading, href: this.childElType === "a" && this.href, name: this.childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: this.childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: this.childElType === "a" && this.target, type: this.childElType === "button" && this.type },
-      loader,
+      loaderNode,
       this.iconStart ? iconStartEl : null,
       this.hasContent ? contentEl : null,
       this.iconEnd ? iconEndEl : null));

package/dist/collection/components/calcite-combobox/calcite-combobox.js

@@ -186,7 +186,9 @@ export class CalciteCombobox {
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      if ((!this.active && !this.open) ||
+        composedPath.includes(this.el) ||
+        composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text) {
@@ -201,6 +203,7 @@ export class CalciteCombobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
+      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;

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

@@ -2,9 +2,9 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch } from "@stencil/core";
+import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { parseTimeString, formatTimeString, getMeridiem, getMeridiemHour } from "../../utils/time";
+import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteInputTimePicker {
@@ -18,8 +18,11 @@ export class CalciteInputTimePicker {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
-    /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
-    this.hourDisplayFormat = "12";
+    /**
+     * BCP 47 language tag for desired language and country format
+     * @internal
+     */
+    this.locale = document.documentElement.lang || navigator.language || "en";
     /**
      * When true, makes the component required for form-submission.
      *
@@ -43,56 +46,60 @@ export class CalciteInputTimePicker {
     //--------------------------------------------------------------------------
     this.calciteInputBlurHandler = () => {
       this.active = false;
-      const newValue = formatTimeString(this.calciteInputEl.value) || formatTimeString(this.value);
-      if (newValue !== this.calciteInputEl.value) {
-        this.setInputValue(newValue);
-      }
+      const shouldIncludeSeconds = this.shouldIncludeSeconds();
+      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
+      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInputFocusHandler = () => {
       this.active = true;
     };
     this.calciteInputInputHandler = (event) => {
-      this.setValue({ value: event.detail.value });
+      const target = event.target;
+      this.setValue({ value: target.value });
+    };
+    this.timePickerChangeHandler = (event) => {
+      event.stopPropagation();
+      const target = event.target;
+      const value = target.value;
+      this.setValue({ value, origin: "time-picker" });
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
+    this.setCalciteTimePickerEl = (el) => {
+      this.calciteTimePickerEl = el;
+    };
     this.setInputValue = (newInputValue) => {
       if (!this.calciteInputEl) {
         return;
       }
-      if (this.hourDisplayFormat === "12") {
-        const { hour, minute, second } = parseTimeString(newInputValue);
-        this.calciteInputEl.value = newInputValue
-          ? `${getMeridiemHour(hour)}:${minute}${this.step !== 60 ? ":" + second : ""} ${getMeridiem(hour)}`
-          : null;
-      }
-      else {
-        this.calciteInputEl.value = newInputValue;
-      }
+      this.calciteInputEl.value = newInputValue;
     };
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
-      const validatedNewValue = formatTimeString(value);
+      const newValue = formatTimeString(value);
+      const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
         ((value !== this.previousValidValue && !value) ||
-          !!(!this.previousValidValue && validatedNewValue) ||
-          (validatedNewValue !== this.previousValidValue && validatedNewValue));
+          !!(!this.previousValidValue && newValue) ||
+          (newValue !== this.previousValidValue && newValue));
       if (value) {
         if (shouldEmit) {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
-        if (validatedNewValue && validatedNewValue !== this.value) {
-          this.value = validatedNewValue;
+        if (newValue && newValue !== this.value) {
+          this.value = newValue;
         }
+        this.localizedValue = newLocalizedValue;
       }
       else {
         this.value = value;
+        this.localizedValue = null;
       }
       if (origin === "time-picker" || origin === "external") {
-        this.setInputValue(validatedNewValue);
+        this.setInputValue(newLocalizedValue);
       }
       if (shouldEmit) {
         const changeEvent = this.calciteInputTimePickerChange.emit();
@@ -103,17 +110,26 @@ export class CalciteInputTimePicker {
           this.previousValidValue = previousValue;
         }
         else {
-          this.previousValidValue = validatedNewValue;
+          this.previousValidValue = newValue;
         }
       }
     };
   }
+  localeWatcher(newLocale) {
+    this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
+  }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
       this.setValue({ value: newValue, origin: "external" });
     }
     this.internalValueChange = false;
   }
+  clickHandler(event) {
+    if (event.composedPath().includes(this.calciteTimePickerEl)) {
+      return;
+    }
+    this.setFocus();
+  }
   keyUpHandler(event) {
     if (event.key === "Escape" && this.active) {
       this.active = false;
@@ -124,21 +140,6 @@ export class CalciteInputTimePicker {
     event.stopPropagation();
     this.active = false;
   }
-  timePickerChangeHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.detail) {
-      const { hour, minute, second } = event.detail;
-      let value;
-      if (hour && minute) {
-        value = second && this.step !== 60 ? `${hour}:${minute}:${second}` : `${hour}:${minute}`;
-      }
-      else {
-        value = "";
-      }
-      this.setValue({ value, origin: "time-picker" });
-    }
-  }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -161,6 +162,9 @@ export class CalciteInputTimePicker {
   onLabelClick() {
     this.setFocus();
   }
+  shouldIncludeSeconds() {
+    return this.step < 60;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -168,15 +172,13 @@ export class CalciteInputTimePicker {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.value) {
-      this.setValue({ value: this.value, origin: "loading" });
+      this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
     connectForm(this);
   }
   componentDidLoad() {
-    if (this.calciteInputEl.value !== this.value) {
-      this.setInputValue(this.value);
-    }
+    this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
     disconnectLabel(this);
@@ -188,13 +190,12 @@ export class CalciteInputTimePicker {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { hour, minute, second } = parseTimeString(this.value);
     const popoverId = `${this.referenceElementId}-popover`;
     return (h(Host, null,
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
         h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
       h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId },
-        h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, minute: minute, scale: this.scale, second: second, step: this.step })),
+        h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
@@ -242,29 +243,6 @@ export class CalciteInputTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
-    "hourDisplayFormat": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "HourDisplayFormat",
-        "resolved": "\"12\" | \"24\"",
-        "references": {
-          "HourDisplayFormat": {
-            "location": "import",
-            "path": "../../utils/time"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually)"
-      },
-      "attribute": "hour-display-format",
-      "reflect": false,
-      "defaultValue": "\"12\""
-    },
     "intlHour": {
       "type": "string",
       "mutable": false,
@@ -469,6 +447,27 @@ export class CalciteInputTimePicker {
       "attribute": "intl-second-up",
       "reflect": false
     },
+    "locale": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "BCP 47 language tag for desired language and country format"
+      },
+      "attribute": "lang",
+      "reflect": false,
+      "defaultValue": "document.documentElement.lang || navigator.language || \"en\""
+    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -567,6 +566,9 @@ export class CalciteInputTimePicker {
       "defaultValue": "null"
     }
   }; }
+  static get states() { return {
+    "localizedValue": {}
+  }; }
   static get events() { return [{
       "method": "calciteInputTimePickerChange",
       "name": "calciteInputTimePickerChange",
@@ -603,24 +605,27 @@ export class CalciteInputTimePicker {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
+      "propName": "locale",
+      "methodName": "localeWatcher"
+    }, {
       "propName": "value",
       "methodName": "valueWatcher"
     }]; }
   static get listeners() { return [{
-      "name": "keyup",
-      "method": "keyUpHandler",
+      "name": "click",
+      "method": "clickHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerBlur",
-      "method": "timePickerBlurHandler",
+      "name": "keyup",
+      "method": "keyUpHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerChange",
-      "method": "timePickerChangeHandler",
+      "name": "calciteTimePickerBlur",
+      "method": "timePickerBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/calcite-label/calcite-label.css

@@ -118,7 +118,6 @@
 
 :host .container {
   color: var(--calcite-ui-text-1);
-  cursor: pointer;
   width: 100%;
   margin-top: 0;
   margin-right: 0;

package/dist/collection/components/calcite-option/calcite-option.js

@@ -51,8 +51,10 @@ export class CalciteOption {
     var _a;
     this.ensureTextContentDependentProps();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
+      attributeFilter: ["label", "value"],
+      characterData: true,
       childList: true,
-      attributeFilter: ["label", "value"]
+      subtree: true
     });
   }
   disconnectedCallback() {

package/dist/collection/components/calcite-radio-button/calcite-radio-button.css

@@ -95,10 +95,79 @@
   outline-offset: 2px;
 }
 
+:host .radio {
+  background-color: var(--calcite-ui-foreground-1);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+}
+
+:host([hovered]) .radio,
+:host(:not([checked])[focused]) .radio {
+  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+}
+
 :host([disabled]) {
   cursor: pointer;
 }
 
+:host([disabled]) .radio {
+  cursor: default;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
+:host([hovered][disabled]) .radio {
+  box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
+}
+
+:host([scale=s]) {
+  --calcite-radio-size: var(--calcite-font-size--2);
+}
+
+:host([scale=m]) {
+  --calcite-radio-size: var(--calcite-font-size--1);
+}
+
+:host([scale=l]) {
+  --calcite-radio-size: var(--calcite-font-size-0);
+}
+
+.radio {
+  height: var(--calcite-radio-size);
+  max-width: var(--calcite-radio-size);
+  min-width: var(--calcite-radio-size);
+}
+
+:host([scale=s][checked]) .radio,
+:host([hovered][scale=s][checked][disabled]) .radio {
+  box-shadow: inset 0 0 0 4px var(--calcite-ui-brand);
+}
+
+:host([scale=s][focused][checked]) .radio {
+  box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+}
+
+:host([scale=m][checked]) .radio,
+:host([hovered][scale=m][checked][disabled]) .radio {
+  box-shadow: inset 0 0 0 5px var(--calcite-ui-brand);
+}
+
+:host([scale=m][focused][checked]) .radio {
+  box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+}
+
+:host([scale=l][checked]) .radio,
+:host([hovered][scale=l][checked][disabled]) .radio {
+  box-shadow: inset 0 0 0 6px var(--calcite-ui-brand);
+}
+
+:host([scale=l][focused][checked]) .radio {
+  box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+}
+
 ::slotted(input[slot=hidden-form-input]) {
   bottom: 0 !important;
   left: 0 !important;

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -234,7 +234,7 @@ export class CalciteRadioButton {
   render() {
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
       h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 },
-        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })),
+        h("div", { class: "radio" })),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-radio-button"; }

package/dist/collection/components/calcite-time-picker/calcite-time-picker.css

@@ -85,162 +85,127 @@
 }
 
 :host {
-  color: var(--calcite-ui-text-1);
   display: inline-block;
+}
+
+.time-picker {
+  background-color: var(--calcite-ui-foreground-1);
+  display: flex;
   font-weight: var(--calcite-font-weight-medium);
+  align-items: center;
   -webkit-user-select: none;
           user-select: none;
+  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  color: var(--calcite-ui-text-1);
+  border-radius: var(--calcite-border-radius);
 }
 
-.time-picker {
-  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
-  align-items: center;
+.time-picker .column {
   display: flex;
-  border-radius: var(--calcite-border-radius);
+  flex-direction: column;
 }
 
-span {
-  align-items: center;
+.time-picker .button {
   background-color: var(--calcite-ui-foreground-1);
+  cursor: pointer;
   display: inline-flex;
+  align-items: center;
   justify-content: center;
 }
 
-span.button {
-  cursor: pointer;
-}
-
-span.button:hover, span.button:focus {
+.time-picker .button:hover, .time-picker .button:focus {
   background-color: var(--calcite-ui-foreground-2);
-}
-
-span.button:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-span.button:active {
+.time-picker .button:active {
   background-color: var(--calcite-ui-foreground-3);
 }
 
-span.button.top-left {
+.time-picker .button.top-left {
   border-top-left-radius: var(--calcite-border-radius);
 }
 
-span.button.bottom-left {
+.time-picker .button.bottom-left {
   border-bottom-left-radius: var(--calcite-border-radius);
 }
 
-span.button.top-right {
+.time-picker .button.top-right {
   border-top-right-radius: var(--calcite-border-radius);
 }
 
-span.button.bottom-right {
+.time-picker .button.bottom-right {
   border-bottom-right-radius: var(--calcite-border-radius);
 }
 
-span.button calcite-icon {
+.time-picker .button calcite-icon {
   color: var(--calcite-ui-text-3);
 }
 
-span.input {
+.time-picker .input {
+  background-color: var(--calcite-ui-foreground-1);
+  cursor: pointer;
   font-weight: var(--calcite-font-weight-medium);
-  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-span.input:hover {
+.time-picker .input:hover {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-2);
 }
 
-span.input:focus, span.input:hover:focus {
+.time-picker .input:focus, .time-picker .input:hover:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
 
-:host([scale=s]) {
+.time-picker.scale-s {
   font-size: var(--calcite-font-size--1);
 }
 
-:host([scale=s]) span {
-  height: 24px;
-  width: 40px;
-}
-
-:host([scale=s]) .delimiter {
-  height: 72px;
-}
-
-:host([scale=s][hour-display-format="12"]) .time-picker {
-  width: 124.2px;
-}
-
-:host([scale=s][hour-display-format="12"]:not([step="60"])) .time-picker {
-  width: 168px;
+.time-picker.scale-s .button,
+.time-picker.scale-s .input {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 
-:host([scale=s][hour-display-format="24"]) .time-picker {
-  width: 84.2px;
+.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child {
+  padding-inline-end: 0.75rem;
 }
 
-:host([scale=s][hour-display-format="24"]:not([step="60"])) .time-picker {
-  width: 128.4px;
-}
-
-:host([scale=m]) {
+.time-picker.scale-m {
   font-size: var(--calcite-font-size-0);
 }
 
-:host([scale=m]) span {
-  height: 32px;
-  width: 44px;
-}
-
-:host([scale=m]) .delimiter {
-  height: 96px;
-}
-
-:host([scale=m][hour-display-format="12"]) .time-picker {
-  width: 136.8px;
+.time-picker.scale-m .button,
+.time-picker.scale-m .input {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-:host([scale=m][hour-display-format="12"]:not([step="60"])) .time-picker {
-  width: 186px;
+.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child {
+  padding-inline-end: 1rem;
 }
 
-:host([scale=m][hour-display-format="24"]) .time-picker {
-  width: 92.8px;
-}
-
-:host([scale=m][hour-display-format="24"]:not([step="60"])) .time-picker {
-  width: 141.6px;
-}
-
-:host([scale=l]) {
+.time-picker.scale-l {
   font-size: var(--calcite-font-size-1);
 }
 
-:host([scale=l]) span {
-  height: 48px;
-  width: 64px;
-}
-
-:host([scale=l]) .delimiter {
-  height: 144px;
-}
-
-:host([scale=l][hour-display-format="12"]) .time-picker {
-  width: 198px;
-}
-
-:host([scale=l][hour-display-format="12"]:not([step="60"])) .time-picker {
-  width: 268px;
-}
-
-:host([scale=l][hour-display-format="24"]) .time-picker {
-  width: 134px;
+.time-picker.scale-l .button,
+.time-picker.scale-l .input {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
-:host([scale=l][hour-display-format="24"]:not([step="60"])) .time-picker {
-  width: 204px;
+.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child {
+  padding-inline-end: 1.25rem;
 }