@esri/calcite-components 1.0.0-next.318 → 1.0.0-next.321

package/dist/collection/components/calcite-icon/assets/calcite-icon/terminal16.json

@@ -0,0 +1 @@
+"M15 1H1a1.002 1.002 0 0 0-1 1v12a1.001 1.001 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1.001 1.001 0 0 0-1-1zm0 13H1V2h14zM3.318 10.328l-.707-.707L4.714 7.52 2.61 5.417l.707-.707 2.81 2.81zM11 10H7V9h4z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/terminal24.json

@@ -0,0 +1 @@
+"M21.5 3h-19A1.504 1.504 0 0 0 1 4.5v15A1.5 1.5 0 0 0 2.5 21h19a1.5 1.5 0 0 0 1.5-1.5v-15A1.504 1.504 0 0 0 21.5 3zm.5 16.5a.501.501 0 0 1-.5.5h-19a.501.501 0 0 1-.5-.5v-15a.506.506 0 0 1 .5-.5h19a.506.506 0 0 1 .5.5zM5.354 15.354l-.707-.707L7.793 11.5 4.646 8.354l.707-.707L9.207 11.5zM15 15h-5v-1h5z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/terminal32.json

@@ -0,0 +1 @@
+"M28 5H4a2.003 2.003 0 0 0-2 2v18a2.001 2.001 0 0 0 2 2h24a2.001 2.001 0 0 0 2-2V7a2.003 2.003 0 0 0-2-2zm1 20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h24a1 1 0 0 1 1 1zM7.354 19.354l-.707-.707L9.793 15.5l-3.147-3.146.707-.707 3.854 3.853zM18 20h-6v-1h6z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/touch16.json

@@ -0,0 +1 @@
+"M8 2.904H7V1.08h1zm3.048-.245l-.7-.713-1.373 1.349.701.713zm1.913 7.411a.935.935 0 0 0-1.011-.97 1.23 1.23 0 0 0-.397.066l-.026-.013a1.16 1.16 0 0 0-.827-.32 1.39 1.39 0 0 0-.211.034A1.098 1.098 0 0 0 9.35 8a1.47 1.47 0 0 0-.35.063V5.437a1.867 1.867 0 0 0-.42-1.377 1.645 1.645 0 0 0-2.147-.002A1.944 1.944 0 0 0 6 5.5v3.908L4.953 8.396a1.242 1.242 0 0 0-1.527-.303 1.11 1.11 0 0 0-.405 1.497l1.534 3.288 1.802 2.307.786-.62-1.706-2.162-1.53-3.274a.125.125 0 0 1 .02-.171c.106-.058.305.132.329.155L7 11.766V5.44a1.096 1.096 0 0 1 .142-.678.684.684 0 0 1 .725 0c.14.142.136.481.133.738V11h1V9.417C9 9 9.202 9 9.35 9c.174 0 .325 0 .325.417V10h.9v-.156a.654.654 0 0 1 .125-.011c.082 0 .125.022.125.042v.292h1c0-.037.22-.054.263-.06A25.262 25.262 0 0 1 12 13.594a12.327 12.327 0 0 1-.55 1.818l.858.287a15.775 15.775 0 0 0 .541-1.891A12.236 12.236 0 0 0 13 11.553a28.619 28.619 0 0 0-.04-1.483zM6.025 3.295L4.653 1.946l-.701.713 1.372 1.349z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/touch24.json

@@ -0,0 +1 @@
+"M12.503 4.142l-.707-.707L13.3 1.932l.707.707zM10 1.134H9v2.833h1zm-2.86 2.3L5.637 1.933l-.707.707 1.503 1.503zm11.835 10.788a1.418 1.418 0 0 0-1.466-1.489 4.475 4.475 0 0 0-.693.064l-.042-.016A1.388 1.388 0 0 0 15.478 12a1.788 1.788 0 0 0-.587.064A1.84 1.84 0 0 0 13 11.06a2.768 2.768 0 0 0-1 .167V6.9a1.905 1.905 0 0 0-2-1.846A1.905 1.905 0 0 0 8 6.9v6.954L6.979 12.64a1.624 1.624 0 0 0-1.066-.733 1.775 1.775 0 0 0-1.264.161 1.478 1.478 0 0 0-.71.968 1.588 1.588 0 0 0 .167 1.137l2.154 4.38 3.32 4.064.773-.635-3.221-3.921-2.144-4.359a.619.619 0 0 1-.074-.446.485.485 0 0 1 .235-.322.796.796 0 0 1 .543-.051.708.708 0 0 1 .47.328L9 16.6V6.9a.908.908 0 0 1 1-.846.908.908 0 0 1 1 .846V14h1v-1.379c0-.373.336-.562 1-.562.374 0 1 .073 1 .562V14h1v-.563c0-.36.111-.47.478-.47.507 0 .522.684.522.762v1.063h1V13.76l-.005.002.005-.008v.006c.011-.005.362-.027.508-.027.129 0 .492.156.492.761.022.245 0 2.992 0 4.093a7.863 7.863 0 0 1-.463 2.657c-.16.421-.56 1.221-.56 1.221l.918.43s.272-.606.398-.925a7.32 7.32 0 0 0 .471-1.57A26.038 26.038 0 0 0 19 17.07z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/touch32.json

@@ -0,0 +1 @@
+"M16.9 6.687l-.707-.707 1.99-1.99.706.707zM15 1h-1v3.953h1zm11 17.814A1.901 1.901 0 0 0 24.1 17a2.791 2.791 0 0 0-1.345.306l-.02-.015A1.903 1.903 0 0 0 20.94 16a2.54 2.54 0 0 0-1.083.207A2.02 2.02 0 0 0 18 15a2.045 2.045 0 0 0-1 .268V9.906a2.002 2.002 0 0 0-4 0v8.976l-2.242-2.993a1.957 1.957 0 0 0-2.657-.652 1.89 1.89 0 0 0-.655 2.573l3.4 6.963 3.45 5.288.839-.547-3.42-5.233-3.364-6.895a.931.931 0 0 1 .25-1.283.968.968 0 0 1 1.354.381L14 21.886V9.906a1.005 1.005 0 0 1 2 0v9.438h1v-2.456a1.005 1.005 0 0 1 2 0v2.456h1.034V17.52c0-.182 0-.521.906-.521a.907.907 0 0 1 .907.906v1.438H23v-.469c0-.505.596-.875 1.1-.875a.906.906 0 0 1 .902.874c.002.03-.002 5.427-.002 5.427a11.653 11.653 0 0 1-.188 2.523 7.87 7.87 0 0 1-1.869 3.586l.725.689a8.122 8.122 0 0 0 2.12-3.962 11.444 11.444 0 0 0 .178-1.24c.036-.417.034-.834.034-.834s.008-6.14 0-6.248zM12.811 5.84l-1.989-1.99-.707.708 1.989 1.989z"

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-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-panel/calcite-panel.js

@@ -63,7 +63,7 @@ export class CalcitePanel {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
-    this.panelKeyUpHandler = (event) => {
+    this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.dismiss();
       }
@@ -200,12 +200,12 @@ export class CalcitePanel {
       h("slot", { name: SLOTS.fab })));
   }
   render() {
-    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
+    const { dismissed, disabled, dismissible, el, loading, panelKeyDownHandler } = this;
     const rtl = getElementDir(el) === "rtl";
     const panelNode = (h("article", { "aria-busy": loading.toString(), class: {
         [CSS.container]: true,
         [CSS_UTILITY.rtl]: rtl
-      }, hidden: dismissible && dismissed, onKeyUp: panelKeyUpHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+      }, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterSlottedContent() || this.renderFooterActions()));

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;
 }