@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.70

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

@@ -1,3 +1,7 @@
+/*!
+ * 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, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { getElementDir } from "../../utils/dom";
@@ -8,6 +12,7 @@ import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 /**
@@ -28,6 +33,12 @@ export class CalciteCombobox {
     this.maxItems = 0;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the selection mode
      * - multi: allow any number of selected items (default)
      * - single: only one selection)
@@ -36,6 +47,14 @@ export class CalciteCombobox {
     this.selectionMode = "multi";
     /** Specify the scale of the combobox, defaults to m */
     this.scale = "m";
+    /** The value(s) of the selectedItem(s) */
+    this.value = null;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
     this.selectedItems = [];
@@ -59,6 +78,10 @@ export class CalciteCombobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.getValue = () => {
+      const items = this.selectedItems.map((item) => item === null || item === void 0 ? void 0 : item.value.toString());
+      return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
+    };
     this.onLabelClick = () => {
       this.setFocus();
     };
@@ -156,7 +179,10 @@ export class CalciteCombobox {
       }
       this.calciteComboboxChipDismiss.emit(event.detail);
     };
-    this.setFocusClick = () => {
+    this.setFocusClick = (event) => {
+      if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
+        return;
+      }
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
@@ -244,8 +270,9 @@ export class CalciteCombobox {
       }
     };
     this.comboboxFocusHandler = () => {
+      var _a;
       this.active = true;
-      this.textInput.focus();
+      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     };
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
@@ -272,6 +299,21 @@ export class CalciteCombobox {
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
+  valueHandler(value) {
+    if (!this.internalValueChangeFlag) {
+      const items = this.getItems();
+      if (Array.isArray(value)) {
+        items.forEach((item) => (item.selected = value.includes(item.value)));
+      }
+      else if (value) {
+        items.forEach((item) => (item.selected = value === item.value));
+      }
+      else {
+        items.forEach((item) => (item.selected = false));
+      }
+      this.updateItems();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -297,7 +339,7 @@ export class CalciteCombobox {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: ComboboxDefaultPlacement,
@@ -320,13 +362,20 @@ export class CalciteCombobox {
   // --------------------------------------------------------------------------
   connectedCallback() {
     var _a;
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
     connectLabel(this);
+    connectForm(this);
   }
   componentWillLoad() {
     this.updateItems();
   }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.getValue());
+  }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
       this.reposition();
@@ -338,6 +387,12 @@ export class CalciteCombobox {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
+    disconnectForm(this);
+  }
+  selectedItemsHandler() {
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
@@ -390,9 +445,11 @@ export class CalciteCombobox {
   calculateSingleItemHeight(item) {
     let height = item.offsetHeight;
     // if item has children items, don't count their height twice
-    const children = item.querySelectorAll(ComboboxChildSelector);
-    children.forEach((child) => {
-      height -= child.offsetHeight;
+    const children = Array.from(item.querySelectorAll(ComboboxChildSelector));
+    children
+      .map((child) => child === null || child === void 0 ? void 0 : child.offsetHeight)
+      .forEach((offsetHeight) => {
+      height -= offsetHeight;
     });
     return height;
   }
@@ -410,16 +467,17 @@ export class CalciteCombobox {
       this.emitCalciteLookupChange();
       this.emitComboboxChange();
       this.resetText();
-      this.textInput.focus();
       this.filterItems("");
     }
     else {
       this.ignoreSelectedEventsFlag = true;
-      this.items.forEach((el) => (el.selected = el === item));
+      this.items.forEach((el) => (el.selected = el === item ? value : false));
       this.ignoreSelectedEventsFlag = false;
       this.selectedItems = this.getSelectedItems();
       this.emitComboboxChange();
-      this.textInput.value = item.textLabel;
+      if (this.textInput) {
+        this.textInput.value = item.textLabel;
+      }
       this.active = false;
       this.updateActiveItemIndex(-1);
       this.resetText();
@@ -476,7 +534,9 @@ export class CalciteCombobox {
     return this.selectionMode === "single" && this.items.some((item) => item.icon);
   }
   resetText() {
-    this.textInput.value = "";
+    if (this.textInput) {
+      this.textInput.value = "";
+    }
     this.text = "";
   }
   getItems() {
@@ -564,6 +624,7 @@ export class CalciteCombobox {
     }
   }
   updateActiveItemIndex(index) {
+    var _a;
     this.activeItemIndex = index;
     let activeDescendant = null;
     this.visibleItems.forEach((el, i) => {
@@ -578,7 +639,7 @@ export class CalciteCombobox {
     this.activeDescendant = activeDescendant;
     if (this.activeItemIndex > -1) {
       this.activeChipIndex = -1;
-      this.textInput.focus();
+      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
   isMulti() {
@@ -650,8 +711,8 @@ export class CalciteCombobox {
       needsIcon && (h("span", { class: "icon-start" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) && (h("calcite-icon", { class: "selected-icon", icon: selectedItem.icon, scale: "s" })))));
   }
   renderIconEnd() {
-    return (this.selectionMode === "single" && (h("span", { class: "icon-end" },
-      h("calcite-icon", { icon: "chevron-down", scale: "s" }))));
+    return (h("span", { class: "icon-end" },
+      h("calcite-icon", { icon: "chevron-down", scale: "s" })));
   }
   render() {
     const { guid, open, label } = this;
@@ -663,13 +724,15 @@ export class CalciteCombobox {
           "wrapper--single": single || !this.selectedItems.length,
           "wrapper--active": open
         }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" },
-        this.renderIconStart(),
-        !single && this.renderChips(),
-        h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label),
-        this.renderInput(),
+        h("div", { class: "grid-input" },
+          this.renderIconStart(),
+          !single && this.renderChips(),
+          h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label),
+          this.renderInput()),
         this.renderIconEnd()),
       h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()),
-      this.renderPopperContainer()));
+      this.renderPopperContainer(),
+      h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-combobox"; }
   static get encapsulation() { return "shadow"; }
@@ -768,6 +831,23 @@ export class CalciteCombobox {
       "reflect": false,
       "defaultValue": "0"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the switch input"
+      },
+      "attribute": "name",
+      "reflect": true
+    },
     "allowCustomValues": {
       "type": "boolean",
       "mutable": false,
@@ -808,6 +888,27 @@ export class CalciteCombobox {
       "reflect": false,
       "defaultValue": "\"absolute\""
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "When true, makes the component required for form-submission."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "selectionMode": {
       "type": "string",
       "mutable": false,
@@ -853,6 +954,24 @@ export class CalciteCombobox {
       "attribute": "scale",
       "reflect": true,
       "defaultValue": "\"m\""
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value(s) of the selectedItem(s)"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {
@@ -877,8 +996,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteComboboxChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calciteComboboxChange instead"
           }],
         "text": "Called when the selected items set changes"
       },
@@ -952,8 +1071,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is opened"
       },
@@ -970,8 +1089,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is closed"
       },
@@ -1022,6 +1141,12 @@ export class CalciteCombobox {
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"
+    }, {
+      "propName": "value",
+      "methodName": "valueHandler"
+    }, {
+      "propName": "selectedItems",
+      "methodName": "selectedItemsHandler"
     }, {
       "propName": "text",
       "methodName": "textHandler"

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";
 import { Build } from "@stencil/core";

package/dist/collection/components/calcite-combobox-item/calcite-combobox-item.css

@@ -152,7 +152,7 @@ ul {
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   text-decoration: none;
-  padding: var(--calcite-combobox-item-spacing-unit-l);
+  padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l);
 }
 
 :host([disabled]) .label {

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

@@ -1,3 +1,7 @@
+/*!
+ * 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, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { CSS } from "./resources";

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

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   icon: "icon",
   iconActive: "icon--active",

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

@@ -1,3 +1,7 @@
+/*!
+ * 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, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";
 import { getAncestors, getDepth } from "../calcite-combobox/utils";

package/dist/collection/components/calcite-combobox-item-group/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const CSS = {
   list: "list",
   label: "label",

package/dist/collection/components/calcite-date-picker/calcite-date-picker.js

@@ -1,3 +1,7 @@
+/*!
+ * 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, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
 import { getElementDir } from "../../utils/dom";
@@ -137,7 +141,9 @@ export class CalciteDatePicker {
      */
     this.reset = () => {
       var _a, _b, _c, _d, _e, _f;
-      if (this.valueAsDate && ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+      if (!Array.isArray(this.valueAsDate) &&
+        this.valueAsDate &&
+        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
         this.activeDate = new Date(this.valueAsDate);
       }
       if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
@@ -206,8 +212,10 @@ export class CalciteDatePicker {
     };
   }
   handleValueAsDate(date) {
-    this.activeDate = date;
-    this.calciteDatePickerChange.emit(date);
+    if (!Array.isArray(date) && date && date !== this.activeDate) {
+      this.activeDate = date;
+      this.calciteDatePickerChange.emit(date);
+    }
   }
   handleRangeChange() {
     const { startAsDate: startDate, endAsDate: endDate } = this;
@@ -220,7 +228,12 @@ export class CalciteDatePicker {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.value) {
+    if (Array.isArray(this.value)) {
+      this.valueAsDate = this.value.map((v) => dateFromISO(v));
+      this.start = this.value[0];
+      this.end = this.value[1];
+    }
+    else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
     }
     if (this.start) {
@@ -271,8 +284,17 @@ export class CalciteDatePicker {
     const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)));
   }
-  valueWatcher(value) {
-    this.valueAsDate = dateFromISO(value);
+  valueHandler(value) {
+    if (Array.isArray(value)) {
+      this.valueAsDate = value.map((v) => dateFromISO(v));
+      this.start = value[0];
+      this.end = value[1];
+    }
+    else if (value) {
+      this.valueAsDate = dateFromISO(value);
+      this.start = "";
+      this.end = "";
+    }
   }
   startWatcher(start) {
     this.setStartAsDate(dateFromISO(start));
@@ -375,8 +397,8 @@ export class CalciteDatePicker {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string | string[]",
+        "resolved": "string | string[]",
         "references": {}
       },
       "required": false,
@@ -414,8 +436,8 @@ export class CalciteDatePicker {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "Date",
-        "resolved": "Date",
+        "original": "Date | Date[]",
+        "resolved": "Date | Date[]",
         "references": {
           "Date": {
             "location": "global"
@@ -444,7 +466,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected start date as full date object"
       }
     },
@@ -463,7 +488,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use valueAsDate instead"
+          }],
         "text": "Selected end date as full date object"
       }
     },
@@ -551,8 +579,8 @@ export class CalciteDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Previous month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous month\""
           }],
         "text": "Localized string for \"previous month\" (used for aria label)"
       },
@@ -572,8 +600,8 @@ export class CalciteDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Next month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next month\""
           }],
         "text": "Localized string for \"next month\" (used for aria label)"
       },
@@ -646,7 +674,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected start date"
       },
       "attribute": "start",
@@ -663,7 +694,10 @@ export class CalciteDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use value instead"
+          }],
         "text": "Selected end date"
       },
       "attribute": "end",
@@ -722,8 +756,8 @@ export class CalciteDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },
@@ -750,7 +784,7 @@ export class CalciteDatePicker {
       "methodName": "handleRangeChange"
     }, {
       "propName": "value",
-      "methodName": "valueWatcher"
+      "methodName": "valueHandler"
     }, {
       "propName": "start",
       "methodName": "startWatcher"

package/dist/collection/components/calcite-date-picker/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-date-picker/resources.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const HEADING_LEVEL = 2;
 export const TEXT = {
   nextMonth: "Next month",

package/dist/collection/components/calcite-date-picker/utils.js

@@ -1,3 +1,7 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";
 /**

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.css

@@ -92,7 +92,7 @@
   color: var(--calcite-ui-text-3);
   cursor: pointer;
   min-width: 0;
-  width: calc(100% / 7);
+  width: 14.2857142857%;
 }
 
 .day-v-wrapper {

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.js

@@ -1,3 +1,7 @@
+/*!
+ * 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, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getKey } from "../../utils/key";
 import { getElementDir } from "../../utils/dom";
@@ -332,8 +336,8 @@ export class CalciteDatePickerDay {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when user hovers over a day"
       },

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.css

@@ -104,7 +104,7 @@
   color: var(--calcite-ui-text-3);
   text-align: center;
   font-weight: var(--calcite-font-weight-bold);
-  width: calc(100% / 7);
+  width: 14.2857142857%;
 }
 
 :host([scale=s]) .week-header {