@esri/calcite-components 1.3.0-next.2 → 1.3.0-next.20

package/dist/collection/components/sortable-list/sortable-list.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: flex;
 }

package/dist/collection/components/sortable-list/sortable-list.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import Sortable from "sortablejs";

package/dist/collection/components/split-button/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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: inline-block;
 }

package/dist/collection/components/split-button/split-button.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/stepper/stepper.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { focusElementInGroup } from "../../utils/dom";
@@ -27,6 +27,9 @@ export class Stepper {
     this.selectedItem = null;
     this.scale = "m";
   }
+  numberingSystemChange() {
+    this.setStepperItemNumberingSystem();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -48,6 +51,7 @@ export class Stepper {
         const spacing = Array(items.length).fill("1fr").join(" ");
         this.el.style.gridTemplateAreas = spacing;
         this.el.style.gridTemplateColumns = spacing;
+        this.setStepperItemNumberingSystem();
       } }));
   }
   //--------------------------------------------------------------------------
@@ -173,6 +177,11 @@ export class Stepper {
   filterItems() {
     return this.items.filter((item) => !item.disabled);
   }
+  setStepperItemNumberingSystem() {
+    this.items.forEach((item) => {
+      item.numberingSystem = this.numberingSystem;
+    });
+  }
   static get is() { return "calcite-stepper"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -454,6 +463,12 @@ export class Stepper {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "numberingSystem",
+        "methodName": "numberingSystemChange"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "calciteInternalStepperItemKeyEvent",

package/dist/collection/components/stepper-item/stepper-item.css

@@ -86,13 +86,18 @@
 }
 
 :host([layout=horizontal][disabled]) .stepper-item-header, :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([layout=horizontal][disabled]) .stepper-item-header *, :host([disabled]) *,
+:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host([scale=s]) {
   --calcite-stepper-item-spacing-unit-s: 0.25rem;
   --calcite-stepper-item-spacing-unit-m: 0.75rem;
@@ -164,8 +169,18 @@
 }
 
 :host(:focus) {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 :host .stepper-item-header {
@@ -375,8 +390,18 @@
   margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
 }
 :host([layout=horizontal]) .stepper-item-header:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 :host([layout=horizontal]) .stepper-item-content {
   cursor: auto;

package/dist/collection/components/stepper-item/stepper-item.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -39,10 +39,11 @@ export class StepperItem {
       }
     };
     this.handleItemClick = (event) => {
-      if (this.layout === "horizontal" &&
-        event
-          .composedPath()
-          .some((el) => el.classList?.contains("stepper-item-content"))) {
+      if (this.disabled ||
+        (this.layout === "horizontal" &&
+          event
+            .composedPath()
+            .some((el) => el.classList?.contains("stepper-item-content")))) {
         return;
       }
       this.emitUserRequestedItem();
@@ -75,6 +76,7 @@ export class StepperItem {
     this.iconFlipRtl = false;
     this.numbered = false;
     this.scale = "m";
+    this.numberingSystem = undefined;
     this.effectiveLocale = "";
   }
   selectedHandler() {
@@ -89,7 +91,7 @@ export class StepperItem {
   effectiveLocaleWatcher(locale) {
     numberStringFormatter.numberFormatOptions = {
       locale,
-      numberingSystem: this.parentStepperEl?.numberingSystem,
+      numberingSystem: this.numberingSystem,
       useGrouping: false
     };
   }
@@ -176,7 +178,7 @@ export class StepperItem {
   renderNumbers() {
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
-      numberingSystem: this.parentStepperEl?.numberingSystem,
+      numberingSystem: this.numberingSystem,
       useGrouping: false
     };
     return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);
@@ -415,6 +417,31 @@ export class StepperItem {
         "attribute": "scale",
         "reflect": true,
         "defaultValue": "\"m\""
+      },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "numbering-system",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/switch/switch.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host([scale=s]) .container {
   block-size: 0.75rem;
 }
@@ -213,8 +217,18 @@
   }
 }
 .container:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 ::slotted(input[slot=hidden-form-input]) {

package/dist/collection/components/switch/switch.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -19,6 +19,9 @@ export class Switch {
       }
     };
     this.clickHandler = () => {
+      if (this.disabled) {
+        return;
+      }
       this.toggle();
     };
     this.setSwitchEl = (el) => {

package/dist/collection/components/tab/tab.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tab-nav/tab-nav.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { filterDirectChildren, focusElementInGroup, getElementDir } from "../../utils/dom";

package/dist/collection/components/tab-title/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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tab-title/tab-title.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: block;
   flex: 0 1 auto;
@@ -122,8 +126,18 @@
 }
 
 :host(:focus) .container {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 :host(:active) a,

package/dist/collection/components/tab-title/tab-title.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { Build, h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -125,6 +125,9 @@ export class TabTitle {
     event.stopPropagation();
   }
   onClick() {
+    if (this.disabled) {
+      return;
+    }
     this.emitActiveTab();
   }
   keyDownHandler(event) {

package/dist/collection/components/tabs/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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const SLOTS = {
   titleGroup: "title-group"

package/dist/collection/components/tabs/tabs.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/text-area/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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   characterLimit: "character-limit",

package/dist/collection/components/text-area/text-area.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   position: relative;
   display: inline-block;
@@ -120,8 +124,18 @@ textarea {
   }
 }
 textarea:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 textarea.text-area--invalid {
   border-width: 1px;
@@ -131,7 +145,17 @@ textarea.text-area--invalid {
 }
 textarea.text-area--invalid:focus {
   outline: 2px solid var(--calcite-ui-danger);
-  outline-offset: -2px;
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 textarea.footer--slotted {
   min-inline-size: 18rem;

package/dist/collection/components/text-area/text-area.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";

package/dist/collection/components/tile/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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   box-sizing: border-box;
   display: inline-block;

package/dist/collection/components/tile/tile.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/tile-select/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.3.0-next.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: block;
 }
@@ -132,7 +136,18 @@
   outline-color: transparent;
 }
 :host .container.focused:not(.disabled):not(.input-enabled) {
-  outline: 2px solid var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
   outline-offset: -4px;
   box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1);
 }

package/dist/collection/components/tile-select/tile-select.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -88,6 +88,9 @@ export class TileSelect {
     event.stopPropagation();
   }
   clickHandler(event) {
+    if (this.disabled) {
+      return;
+    }
     const target = event.target;
     const targets = ["calcite-tile", "calcite-tile-select"];
     if (targets.includes(target.localName)) {
@@ -95,18 +98,20 @@ export class TileSelect {
     }
   }
   pointerEnterHandler() {
-    if (this.input.localName === "calcite-radio-button") {
-      this.input.hovered = true;
+    if (this.disabled) {
+      return;
     }
-    if (this.input.localName === "calcite-checkbox") {
+    const { localName } = this.input;
+    if (localName === "calcite-radio-button" || localName === "calcite-checkbox") {
       this.input.hovered = true;
     }
   }
   pointerLeaveHandler() {
-    if (this.input.localName === "calcite-radio-button") {
-      this.input.hovered = false;
+    if (this.disabled) {
+      return;
     }
-    if (this.input.localName === "calcite-checkbox") {
+    const { localName } = this.input;
+    if (localName === "calcite-radio-button" || localName === "calcite-checkbox") {
       this.input.hovered = false;
     }
   }

package/dist/collection/components/tile-select-group/tile-select-group.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: flex;
   flex-wrap: wrap;

package/dist/collection/components/tile-select-group/tile-select-group.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.3.0-next.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";