@esri/calcite-components 1.0.0-next.343 → 1.0.0-next.347

package/dist/cjs/{number-5feb0c13.js → number-f57fd111.js}

@@ -33,17 +33,24 @@ function parseNumberString(numberString) {
   return isValidNumber(result) ? Number(result).toString() : null;
 }
 function sanitizeDecimalString(decimalString) {
-  return (decimalString === null || decimalString === void 0 ? void 0 : decimalString.endsWith(".")) ? decimalString.replace(".", "") : decimalString;
+  const decimalAtEndOfStringButNotStart = /(?!^\.)\.$/;
+  return decimalString.replace(decimalAtEndOfStringButNotStart, "");
 }
 function sanitizeNegativeString(negativeString) {
-  return negativeString.charAt(0) + negativeString.substring(1).replace(/-/g, "");
+  const allHyphensExceptTheStart = /(?!^-)-/g;
+  return negativeString.replace(allHyphensExceptTheStart, "");
 }
 function sanitizeLeadingZeroString(zeroString) {
-  return zeroString.replace(/^0+$/, "0");
+  const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
+  return zeroString.replace(allLeadingZerosOptionallyNegative, "$1");
 }
 function sanitizeNumberString(value) {
-  return value
-    ? Number(sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)))).toString()
+  const sanitizedValue = sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)));
+  const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
+  return isValidNumber(sanitizedValue)
+    ? isNegativeDecimalOnlyZeros.test(sanitizedValue)
+      ? sanitizedValue
+      : Number(sanitizedValue).toString()
     : value;
 }
 function stringContainsNumbers(string) {

package/dist/cjs/{popper-a7580aca.js → popper-864013e4.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-5a52b331.js');
 
 var top = 'top';
 var bottom = 'bottom';

package/dist/cjs/{resources-27b28faa.js → resources-7b91cec8.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const dom = require('./dom-19822169.js');
+const dom = require('./dom-5a52b331.js');
 const array = require('./array-a5dedf5a.js');
 const debounce = require('./debounce-95979061.js');
 const index = require('./index-6b5d2de5.js');

package/dist/cjs/{resources-5bf6cc29.js → resources-d3c42dc4.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-6b5d2de5.js');
-const locale = require('./locale-c4cb51ca.js');
+const locale = require('./locale-ccfa66f6.js');
 
 /**
  * Get supported locale code from raw user input

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

@@ -113,7 +113,7 @@ export class CalciteCheckbox {
   // --------------------------------------------------------------------------
   render() {
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: 0 },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
         h("svg", { class: "check-svg", viewBox: "0 0 16 16" },
           h("path", { d: this.getPath() })),
         h("slot", null)),

package/dist/collection/components/calcite-dropdown-group/calcite-dropdown-group.css

@@ -78,6 +78,10 @@
   display: none;
 }
 
+:host {
+  display: block;
+}
+
 .container--s {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;

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

@@ -0,0 +1 @@
+"M3.384 12.607L9.799 9.51l2.74-6.05L6.49 6.202zm5.471-3.752l-3.317 1.602 1.606-3.313zM8 .2A7.8 7.8 0 1 0 15.8 8 7.809 7.809 0 0 0 8 .2zm0 14.6A6.8 6.8 0 1 1 14.8 8 6.807 6.807 0 0 1 8 14.8z"

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

@@ -0,0 +1 @@
+"M6.45 17.216l7.981-3.845 2.98-7.115-7.116 2.98zm6.741-4.358l-4.599 2.216 2.216-4.6zM12 1.2A10.8 10.8 0 1 0 22.8 12 10.812 10.812 0 0 0 12 1.2zm0 20.6a9.8 9.8 0 1 1 9.8-9.8 9.81 9.81 0 0 1-9.8 9.8z"

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

@@ -0,0 +1 @@
+"M8.235 24.265l11.038-5.212 4.4-10.226-10.226 4.4zm9.798-5.732L10.33 22.17l3.637-7.703zM16 2.2A13.8 13.8 0 1 0 29.8 16 13.815 13.815 0 0 0 16 2.2zm0 26.6A12.8 12.8 0 1 1 28.8 16 12.815 12.815 0 0 1 16 28.8z"

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

@@ -0,0 +1 @@
+"M4.482 2.52L3.856.335l.96-.275.627 2.183a3.797 3.797 0 0 0-.961.275zM2.347 7.046a3.807 3.807 0 0 1-.09-.493l-2.196.63.275.96 2.196-.63a3.812 3.812 0 0 1-.185-.467zm.33-2.89a3.798 3.798 0 0 1 .272-.42l-1.79-.992-.484.875 1.802.999a3.813 3.813 0 0 1 .2-.461zm5.166-1.48a3.81 3.81 0 0 1 .413.285l.999-1.803L8.38.675l-.992 1.789a3.788 3.788 0 0 1 .455.213zM16 9.5a3.5 3.5 0 0 1-3.5 3.5h-9a2.492 2.492 0 0 1-.648-4.9c.065-.018.127-.042.194-.054a2.482 2.482 0 0 1 .394-.941 2.765 2.765 0 0 1 4.23-3.337 3.97 3.97 0 0 1 6.26 2.544A3.495 3.495 0 0 1 16 9.5zm-1 0a2.503 2.503 0 0 0-1.48-2.276l-.483-.218-.092-.522a2.989 2.989 0 0 0-5.857-.17l-.233.992-.987-.252A1.462 1.462 0 0 0 4.03 8.227l-.124.678-.678.124A1.498 1.498 0 0 0 3.5 12h9A2.503 2.503 0 0 0 15 9.5zM4.241 6.34a2.416 2.416 0 0 1 1.874-.255 3.997 3.997 0 0 1 .813-1.621c-.02-.012-.035-.027-.055-.038a1.799 1.799 0 0 0-2.447.701 1.781 1.781 0 0 0-.185 1.214z"

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

@@ -0,0 +1 @@
+"M6.386 3.593L5.633.573l.97-.241.753 3.019zM3.472 9.129l-.121-.485-3.02.752.243.971 3.019-.753zM4.4 5.253L1.829 3.708l-.515.858L3.885 6.11zm6.347-.853l1.544-2.571-.857-.515L9.89 3.885zM23 13.187A4.813 4.813 0 0 1 18.187 18H5.438a3.438 3.438 0 0 1 0-6.875l.012.001a3.457 3.457 0 0 1 .275-.48 3.494 3.494 0 1 1 5.381-4.24A5.47 5.47 0 0 1 19.95 8.72 4.805 4.805 0 0 1 23 13.188zm-1 0a3.789 3.789 0 0 0-2.418-3.538l-.429-.17-.15-.436a4.494 4.494 0 0 0-8.629.426l-.232.99-.986-.25a2.41 2.41 0 0 0-.594-.084 2.443 2.443 0 0 0-2.206 1.42l-.268.581h-.715A2.437 2.437 0 0 0 5.437 17h12.75A3.817 3.817 0 0 0 22 13.187zM6.397 9.908a3.312 3.312 0 0 1 3.004-.667 5.465 5.465 0 0 1 .962-2.02 2.492 2.492 0 1 0-3.966 2.687z"

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

@@ -0,0 +1 @@
+"M4.593 12.959c.05.162.124.31.184.466l-3.672 1.123-.292-.956 3.657-1.118c.037.162.074.324.123.485zM9.53 4.482L8.408.813l-.956.292L8.57 4.762c.155-.06.31-.12.471-.17.16-.048.326-.073.489-.11zm6.841-2.518l-.883-.47-1.799 3.383a6.613 6.613 0 0 1 .884.468zm-11.03 5.46L1.964 5.63l-.47.883 3.377 1.796c.067-.153.135-.305.213-.454a6.79 6.79 0 0 1 .257-.43zM31 18.5a6.5 6.5 0 0 1-6.5 6.5H7.672a4.614 4.614 0 0 1-4.608-3.727 4.532 4.532 0 0 1 4.208-5.261 4.524 4.524 0 0 1 .434-.876 5.29 5.29 0 1 1 7.765-6.954 7.485 7.485 0 0 1 11.222 4.205A6.497 6.497 0 0 1 31 18.5zm-1 0a5.511 5.511 0 0 0-3.645-5.171l-.478-.172-.143-.488a6.497 6.497 0 0 0-12.612.586l-.18.935-1.01-.145A3.172 3.172 0 0 0 11.5 14a3.497 3.497 0 0 0-3.285 2.344l-.223.633-.67.034a3.5 3.5 0 0 0-3.271 4.098A3.621 3.621 0 0 0 7.672 24H24.5a5.506 5.506 0 0 0 5.5-5.5zM6.873 12.262a4.303 4.303 0 0 0 1.428 2.1A4.438 4.438 0 0 1 11.5 13a4.46 4.46 0 0 1 .64.065 7.498 7.498 0 0 1 2.536-4.304 4.31 4.31 0 0 0-7.803 3.5z"

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

@@ -0,0 +1 @@
+"M2 6H1V3.5A2.5 2.5 0 0 1 3.5 1H6v1H3.5A1.5 1.5 0 0 0 2 3.5zm1.5 9A1.5 1.5 0 0 1 2 13.5V11H1v2.5A2.5 2.5 0 0 0 3.5 16H6v-1zM15 13.5a1.5 1.5 0 0 1-1.5 1.5H11v1h2.5a2.5 2.5 0 0 0 2.5-2.5V11h-1zM13.5 1H11v1h2.5A1.5 1.5 0 0 1 15 3.5V6h1V3.5A2.5 2.5 0 0 0 13.5 1zM9 5h3v3h1V4H9zM5 8V5h3V4H4v4zm7 1v3H9v1h4V9zm-4 3H5V9H4v4h4z"

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

@@ -0,0 +1 @@
+"M3 8H2V4.5A2.5 2.5 0 0 1 4.5 2H8v1H4.5A1.5 1.5 0 0 0 3 4.5zm1.5 14A1.5 1.5 0 0 1 3 20.5V17H2v3.5A2.5 2.5 0 0 0 4.5 23H8v-1zM22 20.5a1.5 1.5 0 0 1-1.5 1.5H17v1h3.5a2.5 2.5 0 0 0 2.5-2.5V17h-1zM20.5 2H17v1h3.5A1.5 1.5 0 0 1 22 4.5V8h1V4.5A2.5 2.5 0 0 0 20.5 2zM14 7h4v4h1V6h-5zm-7 4V7h4V6H6v5zm11 3v4h-4v1h5v-5zm-7 4H7v-4H6v5h5z"

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

@@ -0,0 +1 @@
+"M10 30H5.5A2.5 2.5 0 0 1 3 27.5V23h1v4.5A1.5 1.5 0 0 0 5.5 29H10zm19-7v4.5a1.5 1.5 0 0 1-1.5 1.5H23v1h4.5a2.5 2.5 0 0 0 2.5-2.5V23zM10 3H5.5A2.5 2.5 0 0 0 3 5.5V10h1V5.5A1.5 1.5 0 0 1 5.5 4H10zm17.5 0H23v1h4.5A1.5 1.5 0 0 1 29 5.5V10h1V5.5A2.5 2.5 0 0 0 27.5 3zM18 9h6v6h1V8h-7zm-9 6V9h6V8H8v7zm15 3v6h-6v1h7v-7zm-9 6H9v-6H8v7h7z"

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

@@ -78,8 +78,16 @@
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-ui-icon-color: the color of the icon. Defaults to 'currentColor'.
+*/
 :host {
   display: inline-flex;
+  color: var(--calcite-ui-icon-color);
 }
 
 :host([scale=s]) {

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

@@ -228,18 +228,19 @@ export class CalciteInput {
     };
     this.setValue = (value, nativeEvent, committing = false) => {
       const previousValue = this.value;
-      this.value = this.type === "number" ? sanitizeNumberString(value) : value;
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        const sanitizedValue = sanitizeNumberString(value);
+        this.value = sanitizedValue;
+        this.setLocalizedValue(sanitizedValue);
+      }
+      else {
+        this.value = value;
       }
       if (nativeEvent) {
-        if (this.type === "number") {
-          value = sanitizeNumberString(value);
-        }
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
           nativeEvent,
-          value
+          value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = previousValue;

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

@@ -98,7 +98,7 @@
 }
 
 :host([hovered]) .radio,
-:host(:not([checked])[focused]) .radio {
+:host(:not([checked])[focused]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
 
@@ -137,7 +137,7 @@
   box-shadow: inset 0 0 0 4px var(--calcite-ui-brand);
 }
 
-:host([scale=s][focused][checked]) .radio {
+:host([scale=s][focused][checked]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
 }
 
@@ -146,7 +146,7 @@
   box-shadow: inset 0 0 0 5px var(--calcite-ui-brand);
 }
 
-:host([scale=m][focused][checked]) .radio {
+:host([scale=m][focused][checked]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
 }
 
@@ -155,7 +155,7 @@
   box-shadow: inset 0 0 0 6px var(--calcite-ui-brand);
 }
 
-:host([scale=l][focused][checked]) .radio {
+:host([scale=l][focused][checked]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
 }
 

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

@@ -115,8 +115,10 @@ export class CalciteRadioButton {
       this.calciteInternalRadioButtonBlur.emit();
     };
     this.onContainerFocus = () => {
-      this.focused = true;
-      this.calciteInternalRadioButtonFocus.emit();
+      if (!this.disabled) {
+        this.focused = true;
+        this.calciteInternalRadioButtonFocus.emit();
+      }
     };
   }
   checkedChanged(newChecked) {
@@ -139,7 +141,9 @@ export class CalciteRadioButton {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.containerEl);
+    if (!this.disabled) {
+      focusElement(this.containerEl);
+    }
   }
   onLabelClick(event) {
     if (!this.disabled && !this.hidden) {
@@ -192,6 +196,12 @@ export class CalciteRadioButton {
       }
     });
   }
+  getTabIndex() {
+    if (this.disabled) {
+      return undefined;
+    }
+    return this.checked || this.isDefaultSelectable() ? 0 : -1;
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -218,7 +228,7 @@ export class CalciteRadioButton {
     connectForm(this);
   }
   componentDidLoad() {
-    if (this.focused) {
+    if (this.focused && !this.disabled) {
       this.setFocus();
     }
   }
@@ -232,8 +242,9 @@ export class CalciteRadioButton {
   //
   // --------------------------------------------------------------------------
   render() {
+    const tabIndex = this.getTabIndex();
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex },
         h("div", { class: "radio" })),
       h(HiddenFormInputSlot, { component: this })));
   }

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

@@ -5,7 +5,6 @@
 import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
-import { createObserver } from "../../utils/observers";
 export class CalciteRadioGroupItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -19,30 +18,9 @@ export class CalciteRadioGroupItem {
     this.iconFlipRtl = false;
     /** optionally used with icon, select where to position the icon */
     this.iconPosition = "start";
-    this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
   }
   handleCheckedChange() {
     this.calciteRadioGroupItemChange.emit();
-    this.syncToExternalInput();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
-    if (inputProxy) {
-      this.value = inputProxy.value;
-      this.checked = inputProxy.checked;
-      (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
-    }
-    this.inputProxy = inputProxy;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     const { checked, value } = this;
@@ -63,29 +41,6 @@ export class CalciteRadioGroupItem {
         h("slot", { name: SLOTS.input }),
         this.icon && this.iconPosition === "end" ? iconEl : null)));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  syncFromExternalInput() {
-    if (this.inputProxy) {
-      this.value = this.inputProxy.value;
-      this.checked = this.inputProxy.checked;
-    }
-  }
-  syncToExternalInput() {
-    if (!this.inputProxy) {
-      return;
-    }
-    this.inputProxy.value = this.value;
-    if (this.checked) {
-      this.inputProxy.setAttribute("checked", "");
-    }
-    else {
-      this.inputProxy.removeAttribute("checked");
-    }
-  }
   static get is() { return "calcite-radio-group-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

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

@@ -88,46 +88,13 @@
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-:host(:not([embed])) {
-  padding: 0.75rem;
-  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
-}
-
-:host(:not([embed])[href]:hover) {
-  cursor: pointer;
-  box-shadow: 0 0 0 2px var(--calcite-ui-brand);
-}
-
-:host(:not([embed])[href]:active) {
-  box-shadow: 0 0 0 3px var(--calcite-ui-brand);
-}
-
-:host([icon][heading]:not([description]):not([embed])) {
-  padding: 0px;
-}
-
-:host([icon][heading]:not([description])) .icon {
-  display: flex;
-  justify-content: center;
-}
-:host([icon][heading]:not([description])) .large-visual {
-  text-align: center;
-}
-
-:host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
-  pointer-events: none;
-}
-
-.container {
+:host .container {
   pointer-events: none;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 0.5rem;
 }
-
-.content {
+:host .content {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -135,8 +102,7 @@
   gap: 0.5rem;
   width: 10%;
 }
-
-.content-container {
+:host .content-container {
   display: flex;
   width: 100%;
   flex: 1 1 auto;
@@ -147,20 +113,18 @@
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
-.content-slot-container {
+:host .content-slot-container {
   display: flex;
   align-items: center;
   background-color: var(--calcite-ui-foreground-1);
 }
-.content-slot-container:first-child {
+:host .content-slot-container:first-child {
   padding-right: 0.75rem;
 }
-.content-slot-container:last-child {
+:host .content-slot-container:last-child {
   padding-left: 0.75rem;
 }
-
-.heading {
+:host .heading {
   pointer-events: none;
   overflow-wrap: break-word;
   font-size: var(--calcite-font-size--1);
@@ -170,19 +134,20 @@
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-.large-visual {
+:host .large-visual {
   align-items: center;
+  text-align: center;
   min-height: 12rem;
 }
-.large-visual .icon {
+:host .large-visual .icon {
+  display: flex;
+  justify-content: center;
   align-self: flex-end;
 }
-.large-visual .content-container {
+:host .large-visual .content-container {
   align-self: center;
 }
-
-.description {
+:host .description {
   pointer-events: none;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
@@ -191,6 +156,29 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+:host(:not([embed])) {
+  padding: 0.75rem;
+  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
+}
+
+:host(:not([embed])[href]:hover) {
+  cursor: pointer;
+  box-shadow: 0 0 0 2px var(--calcite-ui-brand);
+}
+
+:host(:not([embed])[href]:active) {
+  box-shadow: 0 0 0 3px var(--calcite-ui-brand);
+}
+
+:host([icon][heading]:not([description]):not([embed])) {
+  padding: 0px;
+}
+
+:host([disabled]) {
+  opacity: var(--calcite-ui-opacity-disabled);
+  pointer-events: none;
+}
+
 :host(:hover) .heading, :host([active]) .heading {
   color: var(--calcite-ui-text-1);
 }

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

@@ -78,7 +78,10 @@
   display: none;
 }
 
-.root {
+:host {
+  display: block;
+}
+:host .container {
   background-color: var(--calcite-ui-foreground-1);
   box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
   box-sizing: border-box;
@@ -92,47 +95,14 @@
   vertical-align: top;
   z-index: 10;
 }
-
-:host {
-  display: block;
-}
-
-:host(:hover) .root {
-  z-index: 20;
-  box-shadow: 0 0 0 1px var(--calcite-ui-border-1);
-}
-
-:host([checked]) .root {
-  z-index: 30;
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
-}
-
-.root.focused {
+:host .container.checked {
   z-index: 30;
-}
-
-:host(:not([input-enabled]):hover) .root {
   box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
-
-:host(:not([input-enabled])) .root.focused {
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand);
-}
-
-:host([width=full]) .root {
-  display: flex;
-  max-width: none;
-}
-:host([width=full]) calcite-tile {
-  flex: 1 1 auto;
-}
-
-:host([input-alignment=start][width=full]) calcite-tile {
-  order: 1;
-  margin-inline-start: 0.75rem;
+:host .container.heading-only {
+  align-items: center;
 }
-
-:host(:not([input-enabled])) ::slotted(calcite-checkbox), :host(:not([input-enabled])) ::slotted(calcite-radio-button) {
+:host .container:not(.input-enabled) ::slotted(calcite-checkbox), :host .container:not(.input-enabled) ::slotted(calcite-radio-button) {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -143,54 +113,64 @@
   white-space: nowrap;
   border-width: 0;
 }
-
-:host([heading]:not([icon]):not([description])) .root {
-  align-items: center;
+:host .container.focused:not(.disabled) {
+  z-index: 30;
 }
-
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) .root,
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) .root {
+:host .container.focused:not(.disabled):not(.input-enabled) {
+  box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand);
+}
+:host .container.input-enabled.input-alignment-start.width-auto.heading-only, :host .container.input-enabled.input-alignment-start.width-auto.icon-only, :host .container.input-enabled.input-alignment-start.width-auto.description-only, :host .container.input-enabled.input-alignment-start.width-auto.heading.description, :host .container.input-enabled.input-alignment-start.width-auto.icon.description, :host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description {
   display: inline-grid;
-  grid-gap: 0.75rem;
   grid-template-columns: max-content 1fr;
 }
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) ::slotted(calcite-checkbox),
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) ::slotted(calcite-radio-button),
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) ::slotted(calcite-checkbox),
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) ::slotted(calcite-radio-button) {
-  order: 0;
+:host .container.input-enabled.input-alignment-start.heading-only, :host .container.input-enabled.input-alignment-start.icon-only, :host .container.input-enabled.input-alignment-start.description-only, :host .container.input-enabled.input-alignment-start.heading.description, :host .container.input-enabled.input-alignment-start.icon.description, :host .container.input-enabled.input-alignment-start.heading.icon.description {
+  gap: 0.75rem;
 }
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) calcite-tile,
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) calcite-tile {
+:host .container.input-enabled.input-alignment-start calcite-tile {
   order: 1;
 }
-
-:host([input-enabled][input-alignment=start][icon][heading]:not([description])) ::slotted(calcite-checkbox),
-:host([input-enabled][input-alignment=start][icon][heading]:not([description])) ::slotted(calcite-radio-button) {
+:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button) {
   position: absolute;
-  top: 0.75rem;
+  inset-block-start: 0.75rem;
   inset-inline-start: 0.75rem;
 }
-
-:host([input-enabled][input-alignment=end][icon][heading]) ::slotted(calcite-checkbox),
-:host([input-enabled][input-alignment=end][icon][heading]) ::slotted(calcite-radio-button) {
-  position: absolute;
-  top: 0.75rem;
-  inset-inline-end: 0.75rem;
-}
-
-:host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) .root {
+:host .container.input-enabled.input-alignment-end.width-auto.heading-only, :host .container.input-enabled.input-alignment-end.width-auto.icon-only {
   display: inline-grid;
   grid-gap: 0.75rem;
   grid-template-columns: max-content 1fr;
 }
-:host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) ::slotted(calcite-checkbox),
-:host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) ::slotted(calcite-radio-button) {
-  justify-self: flex-end;
+:host .container.input-enabled.input-alignment-end.heading-only, :host .container.input-enabled.input-alignment-end.icon-only {
+  gap: 0.75rem;
+}
+:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-radio-button), :host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-radio-button), :host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-radio-button), :host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button) {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+}
+:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button) {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+}
+:host .container.width-full {
+  display: flex;
+  max-width: none;
+}
+:host .container.width-full calcite-tile {
+  flex: 1 1 auto;
 }
 
-:host([hidden]) {
-  display: none;
+:host(:hover) .container {
+  z-index: 20;
+}
+:host(:hover) .container:not(.input-enabled) {
+  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
 
 :host([disabled]) {

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -4,6 +4,7 @@
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
+import { CSS } from "./resources";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -149,8 +150,26 @@ export class CalciteTileSelect {
     this.el.insertAdjacentElement("beforeend", this.input);
   }
   render() {
-    return (h("div", { class: { focused: this.focused, root: true } },
-      h("calcite-tile", { active: this.checked, description: this.description, embed: true, heading: this.heading, icon: this.icon }),
+    const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width } = this;
+    return (h("div", { class: {
+        checked,
+        container: true,
+        [CSS.description]: Boolean(description),
+        [CSS.descriptionOnly]: Boolean(!heading && !icon && description),
+        disabled,
+        focused,
+        [CSS.heading]: Boolean(heading),
+        [CSS.headingOnly]: heading && !icon && !description,
+        [CSS.icon]: Boolean(icon),
+        [CSS.iconOnly]: !heading && icon && !description,
+        [CSS.inputAlignmentEnd]: inputAlignment === "end",
+        [CSS.inputAlignmentStart]: inputAlignment === "start",
+        [CSS.inputEnabled]: inputEnabled,
+        [CSS.largeVisual]: heading && icon && !description,
+        [CSS.widthAuto]: width === "auto",
+        [CSS.widthFull]: width === "full"
+      } },
+      h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon }),
       h("slot", null)));
   }
   static get is() { return "calcite-tile-select"; }