@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

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

@@ -0,0 +1,241 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { localizeTimeString } from "../../utils/time";
+import { accessible, defaults, disabled, focusable, formAssociated, labelable, reflects, renders, hidden } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+describe("calcite-input-time-picker", () => {
+    it("renders", async () => renders("calcite-input-time-picker", { display: "inline-block" }));
+    it("honors hidden attribute", async () => hidden("calcite-input-time-picker"));
+    it("is accessible", async () => accessible(`
+    <calcite-label>
+      Input Time Picker
+      <calcite-input-time-picker name="test"></calcite-input-time-picker>
+    </calcite-label>
+  `));
+    it("has defaults", async () => defaults("calcite-input-time-picker", [
+        { propertyName: "scale", defaultValue: "m" },
+        { propertyName: "step", defaultValue: 60 },
+        { propertyName: "overlayPositioning", defaultValue: "absolute" }
+    ]));
+    it("reflects", async () => reflects(`calcite-input-time-picker`, [
+        { propertyName: "active", value: true },
+        { propertyName: "open", value: true },
+        { propertyName: "disabled", value: true },
+        { propertyName: "scale", value: "m" }
+    ]));
+    it("is labelable", async () => labelable("calcite-input-time-picker"));
+    it("should focus the input when setFocus is called", async () => focusable(`calcite-input-time-picker`, {
+        shadowFocusTargetSelector: "calcite-input"
+    }));
+    it("can be disabled", () => disabled("calcite-input-time-picker"));
+    it("when set to readOnly, element still focusable but won't display the controls or allow for changing the value", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-input-time-picker read-only triggerDisabled={true} id="canReadOnly"></calcite-input-time-picker>`);
+        const component = await page.find("#canReadOnly");
+        const input = await page.find("#canReadOnly >>> calcite-input");
+        const popover = await page.find("#canReadOnly >>> calcite-popover");
+        expect(await input.getProperty("value")).toBe("");
+        await component.callMethod("setFocus");
+        await page.waitForChanges();
+        expect(await page.evaluate(() => document.activeElement.id)).toBe("canReadOnly");
+        expect(await popover.getProperty("open")).toBe(false);
+        await component.click();
+        await page.waitForChanges();
+        expect(await popover.getProperty("open")).toBe(false);
+        await component.type("atención atención");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("");
+    });
+    it("opens the time picker on input keyboard focus", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker></calcite-input-time-picker>`
+        });
+        const popover = await page.find("calcite-input-time-picker >>> calcite-popover");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(await popover.getProperty("open")).toBe(true);
+    });
+    it("opens the time picker on input click", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker></calcite-input-time-picker>`
+        });
+        const input = await page.find("calcite-input-time-picker >>> calcite-input");
+        const popover = await page.find("calcite-input-time-picker >>> calcite-popover");
+        await input.click();
+        await page.waitForChanges();
+        expect(await popover.getProperty("open")).toBe(true);
+    });
+    it("programmatically changing the value reflects in the input for fr lang (24-hour)", async () => {
+        const lang = "fr";
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker lang="${lang}"" step="1"></calcite-input-time-picker>`
+        });
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        const input = await page.find("calcite-input-time-picker >>> calcite-input");
+        for (let second = 0; second < 10; second++) {
+            const date = new Date(0);
+            date.setSeconds(second);
+            const expectedValue = date.toISOString().substr(11, 8);
+            const expectedInputValue = localizeTimeString(expectedValue, lang);
+            inputTimePicker.setProperty("value", expectedValue);
+            await page.waitForChanges();
+            const inputValue = await input.getProperty("value");
+            const inputTimePickerValue = await inputTimePicker.getProperty("value");
+            expect(inputValue).toBe(expectedInputValue);
+            expect(inputTimePickerValue).toBe(expectedValue);
+        }
+        for (let minute = 0; minute < 10; minute++) {
+            const date = new Date(0);
+            date.setMinutes(minute);
+            const expectedValue = date.toISOString().substr(11, 8);
+            const expectedInputValue = localizeTimeString(expectedValue, lang);
+            inputTimePicker.setProperty("value", expectedValue);
+            await page.waitForChanges();
+            const inputValue = await input.getProperty("value");
+            const inputTimePickerValue = await inputTimePicker.getProperty("value");
+            expect(inputValue).toBe(expectedInputValue);
+            expect(inputTimePickerValue).toBe(expectedValue);
+        }
+        for (let hour = 0; hour < 10; hour++) {
+            const date = new Date(0);
+            date.setHours(hour);
+            const expectedValue = date.toISOString().substr(11, 8);
+            const expectedInputValue = localizeTimeString(expectedValue, lang);
+            inputTimePicker.setProperty("value", expectedValue);
+            await page.waitForChanges();
+            const inputValue = await input.getProperty("value");
+            const inputTimePickerValue = await inputTimePicker.getProperty("value");
+            expect(inputValue).toBe(expectedInputValue);
+            expect(inputTimePickerValue).toBe(expectedValue);
+        }
+    });
+    it("value displays correctly in the input when it is programmatically changed for a 12-hour language", async () => {
+        const lang = "en";
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker step="1"></calcite-input-time-picker>`
+        });
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        const input = await page.find("calcite-input-time-picker >>> calcite-input");
+        const date = new Date(0);
+        date.setHours(13);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        const expectedValue = date.toISOString().substr(11, 8);
+        const expectedDisplayValue = localizeTimeString(expectedValue, lang);
+        inputTimePicker.setProperty("value", expectedValue);
+        await page.waitForChanges();
+        const inputValue = await input.getProperty("value");
+        const inputTimePickerValue = await inputTimePicker.getProperty("value");
+        expect(inputValue).toBe(expectedDisplayValue);
+        expect(inputTimePickerValue).toBe(expectedValue);
+    });
+    it("value displays correctly in the input when it is programmatically changed for a 12-hour language when a default value is present", async () => {
+        const lang = "en";
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker step="1" value="11:00:00"></calcite-input-time-picker>`
+        });
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        const input = await page.find("calcite-input-time-picker >>> calcite-input");
+        expect(await input.getProperty("value")).toBe("11:00:00 AM");
+        expect(await inputTimePicker.getProperty("value")).toBe("11:00:00");
+        const date = new Date(0);
+        date.setHours(13);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        const expectedValue = date.toISOString().substr(11, 8);
+        const expectedDisplayValue = localizeTimeString(expectedValue, lang);
+        inputTimePicker.setProperty("value", expectedValue);
+        await page.waitForChanges();
+        const inputValue = await input.getProperty("value");
+        const inputTimePickerValue = await inputTimePicker.getProperty("value");
+        expect(inputValue).toBe(expectedDisplayValue);
+        expect(inputTimePickerValue).toBe(expectedValue);
+    });
+    it("value displays correctly in the input when it is programmatically changed for a 24-hour language when a default value is present", async () => {
+        const lang = "fr";
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker step="1" value="11:00:00" lang="${lang}"></calcite-input-time-picker>`
+        });
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        const input = await page.find("calcite-input-time-picker >>> calcite-input");
+        expect(await input.getProperty("value")).toBe("11:00:00");
+        expect(await inputTimePicker.getProperty("value")).toBe("11:00:00");
+        const date = new Date(0);
+        date.setHours(13);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        const expectedValue = "13:59:59";
+        const expectedDisplayValue = localizeTimeString(expectedValue, lang);
+        inputTimePicker.setProperty("value", expectedValue);
+        await page.waitForChanges();
+        const inputValue = await input.getProperty("value");
+        const inputTimePickerValue = await inputTimePicker.getProperty("value");
+        expect(inputValue).toBe(expectedDisplayValue);
+        expect(inputTimePickerValue).toBe(expectedValue);
+    });
+    it("appropriately triggers calciteInputTimePickerChange event when the user types a value", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-input-time-picker step="1"></calcite-input-time-picker>`);
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        const changeEvent = await inputTimePicker.spyOnEvent("calciteInputTimePickerChange");
+        expect(changeEvent).toHaveReceivedEventTimes(0);
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("1");
+        await page.keyboard.press(":");
+        await page.keyboard.press("2");
+        await page.waitForChanges();
+        expect(changeEvent).toHaveReceivedEventTimes(1);
+        await page.keyboard.press(":");
+        await page.keyboard.press("3");
+        await page.waitForChanges();
+        expect(changeEvent).toHaveReceivedEventTimes(2);
+    });
+    it("formats valid typed time value appropriately on blur", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-input-time-picker step="1"></calcite-input-time-picker><input>`);
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        await page.keyboard.press("Tab");
+        await page.keyboard.type("2:3:4");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(await inputTimePicker.getProperty("value")).toBe("02:03:04");
+    });
+    it("resets to previous value when default event behavior is prevented", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker value="14:59"></calcite-input-time-picker>`
+        });
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        await page.evaluate(() => {
+            const inputTimePicker = document.querySelector("calcite-input-time-picker");
+            inputTimePicker.addEventListener("calciteInputTimePickerChange", (event) => {
+                event.preventDefault();
+            });
+        });
+        expect(await inputTimePicker.getProperty("value")).toBe("14:59");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press(":");
+        await page.keyboard.press("5");
+        await page.waitForChanges();
+        expect(await inputTimePicker.getProperty("value")).toBe("14:59");
+    });
+    it("sets initial value to undefined when it is not a valid time value", async () => {
+        const page = await newE2EPage({
+            html: `<calcite-input-time-picker value="invalid"></calcite-input-time-picker>`
+        });
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        expect(await inputTimePicker.getProperty("value")).toBeUndefined();
+    });
+    it("is form-associated", () => formAssociated("calcite-input-time-picker", { testValue: "03:23", submitsOnEnter: true }));
+    it("should set active prop to same value as open and vice-versa", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-input-time-picker value="14:59"></calcite-input-time-picker>`);
+        const inputTimePicker = await page.find("calcite-input-time-picker");
+        expect(await inputTimePicker.getProperty("active")).toBe(false);
+        expect(await inputTimePicker.getProperty("open")).toBe(false);
+        inputTimePicker.setProperty("open", true);
+        await page.waitForChanges();
+        expect(await inputTimePicker.getProperty("active")).toBe(true);
+        inputTimePicker.setProperty("active", false);
+        await page.waitForChanges();
+        expect(await inputTimePicker.getProperty("open")).toBe(false);
+    });
+});

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

@@ -1,14 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
-import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
+import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
+import { getLocale } from "../../utils/locale";
 export class InputTimePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -32,12 +34,6 @@ export class InputTimePicker {
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     this.readOnly = false;
-    /**
-     * 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.
      *
@@ -46,6 +42,13 @@ export class InputTimePicker {
     this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
+    this.overlayPositioning = "absolute";
     /**
      * Determines where the popover will be positioned relative to the input.
      *
@@ -62,14 +65,21 @@ export class InputTimePicker {
     this.referenceElementId = `input-time-picker-${guid()}`;
     //--------------------------------------------------------------------------
     //
+    //  State
+    //
+    //--------------------------------------------------------------------------
+    this.globalAttributes = {};
+    //--------------------------------------------------------------------------
+    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
     this.calciteInternalInputBlurHandler = () => {
       this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
-      this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
+      const locale = getLocale(this);
+      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, locale, shouldIncludeSeconds);
+      this.setInputValue(localizedInputValue || localizeTimeString(this.value, locale, shouldIncludeSeconds));
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
@@ -125,7 +135,7 @@ export class InputTimePicker {
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
       const newValue = formatTimeString(value);
-      const newLocalizedValue = localizeTimeString(newValue, this.locale, this.shouldIncludeSeconds());
+      const newLocalizedValue = localizeTimeString(newValue, getLocale(this), this.shouldIncludeSeconds());
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
@@ -178,8 +188,9 @@ export class InputTimePicker {
       this.open = false;
     }
   }
-  localeWatcher(newLocale) {
-    this.setInputValue(localizeTimeString(this.value, newLocale, this.shouldIncludeSeconds()));
+  localeWatcher() {
+    const locale = getLocale(this);
+    this.setInputValue(localizeTimeString(this.value, locale, this.shouldIncludeSeconds()));
   }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
@@ -238,6 +249,7 @@ export class InputTimePicker {
     }
     connectLabel(this);
     connectForm(this);
+    watchGlobalAttributes(this, ["lang"]);
     if (open) {
       this.active = open;
     }
@@ -251,6 +263,7 @@ export class InputTimePicker {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
+    unwatchGlobalAttributes(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -265,8 +278,8 @@ export class InputTimePicker {
     return (h(Host, { onKeyDown: this.keyDownHandler },
       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), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
-        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, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
+      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
+        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: getLocale(this), onCalciteInternalTimePickerChange: 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"; }
@@ -353,7 +366,7 @@ export class InputTimePicker {
         "text": "When true, still focusable but controls are gone and the value cannot be modified."
       },
       "attribute": "read-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "intlHour": {
@@ -574,12 +587,17 @@ export class InputTimePicker {
         "tags": [{
             "name": "internal",
             "text": undefined
+          }, {
+            "name": "deprecated",
+            "text": "set the global `lang` attribute on the element instead."
+          }, {
+            "name": "mdn",
+            "text": "[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)"
           }],
         "text": "BCP 47 language tag for desired language and country format"
       },
-      "attribute": "lang",
-      "reflect": false,
-      "defaultValue": "document.documentElement.lang || navigator.language || \"en\""
+      "attribute": "locale",
+      "reflect": false
     },
     "name": {
       "type": "string",
@@ -596,7 +614,7 @@ export class InputTimePicker {
         "text": "The name of the time input"
       },
       "attribute": "name",
-      "reflect": false
+      "reflect": true
     },
     "required": {
       "type": "boolean",
@@ -642,6 +660,29 @@ export class InputTimePicker {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "overlayPositioning": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "OverlayPositioning",
+        "resolved": "\"absolute\" | \"fixed\"",
+        "references": {
+          "OverlayPositioning": {
+            "location": "import",
+            "path": "../../utils/floating-ui"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
+      },
+      "attribute": "overlay-positioning",
+      "reflect": false,
+      "defaultValue": "\"absolute\""
+    },
     "placement": {
       "type": "string",
       "mutable": false,
@@ -683,7 +724,7 @@ export class InputTimePicker {
         "text": "number (seconds) that specifies the granularity that the value must adhere to"
       },
       "attribute": "step",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "60"
     },
     "value": {
@@ -706,6 +747,7 @@ export class InputTimePicker {
     }
   }; }
   static get states() { return {
+    "globalAttributes": {},
     "localizedValue": {}
   }; }
   static get events() { return [{
@@ -771,6 +813,9 @@ export class InputTimePicker {
     }, {
       "propName": "readOnly",
       "methodName": "handleDisabledAndReadOnlyChange"
+    }, {
+      "propName": "globalAttributes",
+      "methodName": "localeWatcher"
     }, {
       "propName": "locale",
       "methodName": "localeWatcher"

package/dist/collection/components/interfaces.js

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

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

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/label/label.e2e.js

@@ -0,0 +1,156 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { renders, hidden } from "../../tests/commonTests";
+describe("calcite-label", () => {
+    it("renders", () => renders("calcite-label", { display: "inline" }));
+    it("renders default props when none are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-label>
+    Label text
+    <calcite-input></calcite-input>
+    </calcite-label>
+    `);
+        const element = await page.find("calcite-label");
+        expect(element).toEqualAttribute("status", "idle");
+        expect(element).toEqualAttribute("layout", "default");
+    });
+    it("renders requested props when valid props are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-label layout="inline-space-between">
+    Label text
+    <calcite-input></calcite-input>
+    </calcite-label>
+    `);
+        const element = await page.find("calcite-label");
+        expect(element).toEqualAttribute("layout", "inline-space-between");
+    });
+    it("honors hidden attribute", async () => hidden("calcite-label"));
+    describe("alignment prop", () => {
+        let page;
+        let element;
+        let style;
+        describe("default behavior", () => {
+            it("should render with 'start' alignment", async () => {
+                page = await newE2EPage({
+                    html: `<calcite-label>Label text
+          <calcite-input></calcite-input>
+          </calcite-label>`
+                });
+                element = await page.find("calcite-label");
+                expect(await element.getProperty("alignment")).toEqual("start");
+            });
+            describe("when in a center-aligned container", () => {
+                describe("when direction is left-to-right", () => {
+                    it("should render text left-aligned", async () => {
+                        page = await newE2EPage({
+                            html: `<div style="text-align: center;">
+              <calcite-label dir="ltr">Label text
+              <calcite-input></calcite-input>
+              </calcite-label>
+              </div>`
+                        });
+                        element = await page.find("calcite-label >>> .container");
+                        style = await element.getComputedStyle();
+                        expect(style["textAlign"]).toEqual("start");
+                    });
+                });
+                describe("when direction is right-to-left", () => {
+                    it("should render text right-aligned", async () => {
+                        page = await newE2EPage({
+                            html: `<div style="text-align: center;">
+              <calcite-label dir="rtl">Label text
+              <calcite-input></calcite-input>
+              </calcite-label>
+              </div>`
+                        });
+                        element = await page.find("calcite-label >>> .container");
+                        style = await element.getComputedStyle();
+                        expect(style["textAlign"]).toEqual("start");
+                    });
+                });
+            });
+        });
+        describe("when alignment prop is provided", () => {
+            describe("'center' alignment", () => {
+                it("should render text center-aligned", async () => {
+                    page = await newE2EPage({
+                        html: `<calcite-label alignment="center">Label text
+            <calcite-input></calcite-input>
+            </calcite-label>`
+                    });
+                    element = await page.find("calcite-label >>> .container");
+                    style = await element.getComputedStyle();
+                    expect(style["textAlign"]).toEqual("center");
+                });
+            });
+            describe("'end' alignment", () => {
+                describe("when direction is left-to-right", () => {
+                    it("should render text right-aligned", async () => {
+                        page = await newE2EPage({
+                            html: `<calcite-label alignment="end" dir="ltr">Label text
+              <calcite-input></calcite-input>
+              </calcite-label>`
+                        });
+                        element = await page.find("calcite-label >>> .container");
+                        style = await element.getComputedStyle();
+                        expect(style["textAlign"]).toEqual("end");
+                    });
+                });
+                describe("when direction is right-to-left", () => {
+                    it("should render text left-aligned", async () => {
+                        page = await newE2EPage({
+                            html: `<calcite-label alignment="end" dir="rtl">Label text
+              <calcite-input></calcite-input>
+              </calcite-label>`
+                        });
+                        element = await page.find("calcite-label >>> .container");
+                        style = await element.getComputedStyle();
+                        expect(style["textAlign"]).toEqual("end");
+                    });
+                });
+            });
+        });
+    });
+    it("does not pass id to child label element", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-label id="dont-duplicate-me" layout="inline-space-between">
+    Label text
+    <calcite-input></calcite-input>
+    </calcite-label>
+    `);
+        const element = await page.find("calcite-label");
+        const childElement = await page.find("calcite-label >>> .container");
+        expect(element).toEqualAttribute("id", "dont-duplicate-me");
+        expect(childElement).not.toHaveAttribute("id");
+        expect(element).toEqualAttribute("layout", "inline-space-between");
+    });
+    // TODO: need shadow DOM equivalent update on helper
+    it("clicking sibling label focuses input when both are inside a shadowRoot", async () => {
+        const page = await newE2EPage();
+        await page.evaluate(() => {
+            document.addEventListener("calciteInputFocus", (event) => {
+                window.eventDetail = event.detail;
+            });
+        });
+        await page.evaluate(() => {
+            class ShadowComponent extends HTMLElement {
+                constructor() {
+                    super();
+                    const shadow = this.attachShadow({ mode: "open" });
+                    shadow.innerHTML = `
+            <calcite-label for="input">Label</calcite-label>
+            <calcite-input id="input"></calcite-input>
+          `;
+                }
+            }
+            customElements.define("shadow-component", ShadowComponent);
+            const shadowComponent = document.createElement("shadow-component");
+            document.body.appendChild(shadowComponent);
+            shadowComponent.shadowRoot.querySelector("calcite-label").click();
+        });
+        const eventDetail = await page.evaluateHandle(() => window.eventDetail);
+        expect(eventDetail).toBeTruthy();
+    });
+});

package/dist/collection/components/label/label.js

@@ -1,7 +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.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -222,7 +222,7 @@ export class Label {
         "text": "eliminates any space around the label"
       },
       "attribute": "disable-spacing",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }

package/dist/collection/components/label/resources.js

@@ -1,7 +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.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   container: "container"