@esri/calcite-components 2.2.0-next.0 → 2.2.0-next.2

package/dist/cjs/calcite-tile-select_2.cjs.entry.js

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const guid = require('./guid-9272df1b.js');
-const interactive = require('./interactive-04057cf9.js');
-const loadable = require('./loadable-488230d3.js');
-require('./browser-843700f4.js');
+const index = require('./index-c3a85d17.js');
+const guid = require('./guid-2999da4b.js');
+const interactive = require('./interactive-77fbebed.js');
+const loadable = require('./loadable-3315b101.js');
+require('./browser-767f345c.js');
 
 const CSS = {
     checked: "checked",
@@ -36,7 +36,7 @@ const CSS = {
     widthFull: "width-full",
 };
 
-const tileSelectCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host .container{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px var(--calcite-color-border-2);box-sizing:border-box;cursor:pointer;display:inline-block;block-size:100%;max-inline-size:300px;padding:0.75rem;position:relative;vertical-align:top;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host .container.checked{z-index:var(--calcite-z-index);box-shadow:0 0 0 1px var(--calcite-color-brand)}:host .container.heading-only{align-items:center}:host .container:not(.input-enabled) ::slotted(calcite-checkbox),:host .container:not(.input-enabled) ::slotted(calcite-radio-button){position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host .container.focused{outline-color:transparent}:host .container.focused:not(.disabled):not(.input-enabled){outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-4px;box-shadow:0 0 0 1px var(--calcite-color-brand), inset 0 0 0 2px var(--calcite-color-foreground-1)}: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-template-columns:max-content 1fr}: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 .container.input-enabled.input-alignment-start .tile{order:1}: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;inset-block-start:0.75rem;inset-inline-start:0.75rem}: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 .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-inline-size:none}:host .container.width-full .tile{flex:1 1 auto}.tile{pointer-events:none;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;gap:0.5rem;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.tile-content-container{display:flex;inline-size:100%;align-items:stretch;padding:0px;color:var(--calcite-color-text-2);outline-color:transparent}.tile-content{display:flex;flex:1 1 auto;flex-direction:column;gap:0.5rem;inline-size:10%}.tile-heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.tile-description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.tile--large-visual{display:grid;justify-content:center;text-align:center;min-block-size:12rem}.tile--large-visual .icon{align-self:flex-end}.tile--large-visual calcite-icon{block-size:64px;inline-size:64px}.tile--large-visual .tile-content-container{align-self:center}:host(:hover) .container:not(.input-enabled){box-shadow:0 0 0 1px var(--calcite-color-brand)}:host(:hover) .tile-heading,.checked .tile-heading{color:var(--calcite-color-text-1)}:host(:hover) .tile-description,.checked .tile-description{color:var(--calcite-color-text-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+const tileSelectCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host .container{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px var(--calcite-color-border-2);box-sizing:border-box;cursor:pointer;display:inline-block;block-size:100%;max-inline-size:300px;padding:0.75rem;position:relative;vertical-align:top;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host .container.checked{z-index:var(--calcite-z-index);box-shadow:0 0 0 1px var(--calcite-color-brand)}:host .container.heading-only{align-items:center}:host .container:not(.input-enabled) ::slotted(calcite-checkbox),:host .container:not(.input-enabled) ::slotted(calcite-radio-button){position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host .container.focused{outline-color:transparent}:host .container.focused:not(.disabled):not(.input-enabled){outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-4px;box-shadow:0 0 0 1px var(--calcite-color-brand), inset 0 0 0 2px var(--calcite-color-foreground-1)}: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-template-columns:max-content 1fr}: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 .container.input-enabled.input-alignment-start .tile{order:1}: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;inset-block-start:0.75rem;inset-inline-start:0.75rem}: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 .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-inline-size:none}:host .container.width-full .tile{flex:1 1 auto}.tile{pointer-events:none;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;gap:0.5rem;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.tile-content-container{display:flex;inline-size:100%;align-items:stretch;padding:0px;color:var(--calcite-color-text-2);outline-color:transparent}.tile-content{display:flex;flex:1 1 auto;flex-direction:column;gap:0.5rem;inline-size:10%}.tile-heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.tile-description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.tile--large-visual{display:grid;justify-content:center;text-align:center;min-block-size:12rem}.tile--large-visual .icon{align-self:flex-end}.tile--large-visual calcite-icon{block-size:64px;inline-size:64px}.tile--large-visual .tile-content-container{align-self:center}:host(:hover) .container:not(.input-enabled){box-shadow:0 0 0 1px var(--calcite-color-brand)}:host(:hover) .tile-heading,.checked .tile-heading{color:var(--calcite-color-text-1)}:host(:hover) .tile-description,.checked .tile-description{color:var(--calcite-color-text-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TileSelect = class {
     constructor(hostRef) {
@@ -190,7 +190,7 @@ const TileSelect = class {
         const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width, iconFlipRtl, } = this;
         const isLargeVisual = heading && icon && !description;
         const renderIcon = Boolean(icon);
-        return (index.h("div", { class: {
+        return (index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("div", { class: {
                 checked,
                 container: true,
                 [CSS.description]: Boolean(description),
@@ -207,7 +207,7 @@ const TileSelect = class {
                 [CSS.largeVisual]: isLargeVisual,
                 [CSS.widthAuto]: width === "auto",
                 [CSS.widthFull]: width === "full",
-            } }, index.h("div", { class: { [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual } }, icon && (index.h("div", { class: { [CSS.icon]: renderIcon } }, index.h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), index.h("div", { class: CSS.tileContentContainer }, index.h("div", { class: CSS.tileContent }, heading && index.h("div", { class: CSS.tileHeading }, heading), description && index.h("div", { class: CSS.tileDescription }, description)))), index.h("slot", null)));
+            } }, index.h("div", { class: { [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual } }, icon && (index.h("div", { class: { [CSS.icon]: renderIcon } }, index.h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l" }))), index.h("div", { class: CSS.tileContentContainer }, index.h("div", { class: CSS.tileContent }, heading && index.h("div", { class: CSS.tileHeading }, heading), description && index.h("div", { class: CSS.tileDescription }, description)))), index.h("slot", null))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -217,7 +217,7 @@ const TileSelect = class {
 };
 TileSelect.style = tileSelectCss;
 
-const tileSelectGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-wrap:wrap}:host ::slotted(calcite-tile-select){margin-block-end:1px;margin-inline-end:1px}:host([layout=vertical]){flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+const tileSelectGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-wrap:wrap}:host ::slotted(calcite-tile-select){margin-block-end:1px;margin-inline-end:1px}:host([layout=vertical]){flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TileSelectGroup = class {
     constructor(hostRef) {
@@ -240,7 +240,7 @@ const TileSelectGroup = class {
         interactive.disconnectInteractive(this);
     }
     render() {
-        return index.h("slot", null);
+        return (index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("slot", null)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/calcite-tile-select_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-tile-select.calcite-tile-select-group.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,kBAAkB;IACnC,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,cAAc;IAC3B,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,WAAW;IACrB,iBAAiB,EAAE,qBAAqB;IACxC,mBAAmB,EAAE,uBAAuB;IAC5C,YAAY,EAAE,eAAe;IAC7B,WAAW,EAAE,cAAc;IAC3B,IAAI,EAAE,MAAM;IACZ,oBAAoB,EAAE,wBAAwB;IAC9C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,kBAAkB;IACnC,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,oBAAoB;IACrC,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;CACxB;;ACrBD,MAAM,aAAa,GAAG,oiMAAoiM;;MCsC7iM,UAAU;;;;QAsErB,SAAI,GAAG,uBAAuBA,SAAI,EAAE,EAAE,CAAC;uBA9DW,KAAK;;wBAWnB,KAAK;;sBAMP,KAAK;;2BAMA,KAAK;;4BAWJ,KAAK;8BAGkC,OAAO;oBAOtC,OAAO;;qBAMW,MAAM;uBAqBrD,KAAK;;IApExB,cAAc,CAAC,UAAmB;QAChC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;KACjC;IAwBD,WAAW,CAAC,OAAe;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;KAC3B;;;;;;;IAiED,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,OAAO,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC/B;;;;;;IASD,qBAAqB,CAAC,KAAkB;QACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAoC,CAAC;QAC5D,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;YAC3B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;SACjC;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;KACrC;IAID,wBAAwB,CAAC,KAAkB;QACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAoC,CAAC;QAC5D,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;YAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;SAC7B;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAGD,wBAAwB,CAAC,KAAkB;QACzC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAuC,CAAC;QAClE,IAAI,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE;YAC9B,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;SACpC;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;KACrC;IAGD,+BAA+B,CAAC,KAAkB;QAChD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAuC,CAAC;QAClE,IAAI,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE;YAC9B,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;SACpC;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAID,2BAA2B,CAAC,KAAkB;QAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,MAAuC,CAAC;QAClE,IAAI,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE;YAC9B,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC;SACpC;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAGD,YAAY,CAAC,KAAiB;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,OAAO,GAAG,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;QACxD,IAAI,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;YACtC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;SACpB;KACF;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,IAAI,SAAS,KAAK,sBAAsB,IAAI,SAAS,KAAK,kBAAkB,EAAE;YAC3E,IAAI,CAAC,KAAoE,CAAC,OAAO,GAAG,IAAI,CAAC;SAC3F;KACF;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,IAAI,SAAS,KAAK,sBAAsB,IAAI,SAAS,KAAK,kBAAkB,EAAE;YAC3E,IAAI,CAAC,KAAoE,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5F;KACF;;;;;;IAQD,iBAAiB;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;QACnBC,8BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9CC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQO,WAAW;QACjB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,aAAa,CACjC,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,sBAAsB,GAAG,kBAAkB,CACpE,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;QAEnD,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SAC7B;QAED,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;SACpE;QAED,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACxD;IAED,MAAM;QACJ,MAAM,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,GACZ,GAAG,IAAI,CAAC;QACT,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QACtD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QACjC,QACEC,iBACE,KAAK,EAAE;gBACL,OAAO;gBACP,SAAS,EAAE,IAAI;gBACf,CAAC,GAAG,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;gBACvC,CAAC,GAAG,CAAC,eAAe,GAAG,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,WAAW,CAAC;gBAChE,QAAQ;gBACR,OAAO;gBACP,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;gBAC/B,CAAC,GAAG,CAAC,WAAW,GAAG,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW;gBACnD,CAAC,GAAG,CAAC,IAAI,GAAG,UAAU;gBACtB,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW;gBAChD,CAAC,GAAG,CAAC,iBAAiB,GAAG,cAAc,KAAK,KAAK;gBACjD,CAAC,GAAG,CAAC,mBAAmB,GAAG,cAAc,KAAK,OAAO;gBACrD,CAAC,GAAG,CAAC,YAAY,GAAG,YAAY;gBAChC,CAAC,GAAG,CAAC,WAAW,GAAG,aAAa;gBAChC,CAAC,GAAG,CAAC,SAAS,GAAG,KAAK,KAAK,MAAM;gBACjC,CAAC,GAAG,CAAC,SAAS,GAAG,KAAK,KAAK,MAAM;aAClC,IAEDA,iBAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,eAAe,GAAG,aAAa,EAAE,IACnE,IAAI,KACHA,iBAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,UAAU,EAAE,IACpCA,0BAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,CACxD,CACP,EACDA,iBAAK,KAAK,EAAE,GAAG,CAAC,oBAAoB,IAClCA,iBAAK,KAAK,EAAE,GAAG,CAAC,WAAW,IACxB,OAAO,IAAIA,iBAAK,KAAK,EAAE,GAAG,CAAC,WAAW,IAAG,OAAO,CAAO,EACvD,WAAW,IAAIA,iBAAK,KAAK,EAAE,GAAG,CAAC,eAAe,IAAG,WAAW,CAAO,CAChE,CACF,CACF,EACNA,qBAAQ,CACJ,EACN;KACH;;;;;;;;;AC7VH,MAAM,kBAAkB,GAAG,mgBAAmgB;;MCiBjhB,eAAe;;;wBAQU,KAAK;sBAOgB,YAAY;;;;;;;IAgBrE,iBAAiB;QACfL,8BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChBI,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClBD,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,OAAOE,qBAAQ,CAAC;KACjB;;;;;;;;","names":["guid","componentFocusable","connectInteractive","setUpLoadableComponent","setComponentLoaded","disconnectInteractive","updateHostInteraction","h"],"sources":["src/components/tile-select/resources.ts","src/components/tile-select/tile-select.scss?tag=calcite-tile-select&encapsulation=shadow","src/components/tile-select/tile-select.tsx","src/components/tile-select-group/tile-select-group.scss?tag=calcite-tile-select-group&encapsulation=shadow","src/components/tile-select-group/tile-select-group.tsx"],"sourcesContent":["export const CSS = {\n  checked: \"checked\",\n  description: \"description\",\n  descriptionOnly: \"description-only\",\n  disabled: \"disabled\",\n  heading: \"heading\",\n  headingOnly: \"heading-only\",\n  icon: \"icon\",\n  iconOnly: \"icon-only\",\n  inputAlignmentEnd: \"input-alignment-end\",\n  inputAlignmentStart: \"input-alignment-start\",\n  inputEnabled: \"input-enabled\",\n  largeVisual: \"large-visual\",\n  tile: \"tile\",\n  tileContentContainer: \"tile-content-container\",\n  tileContent: \"tile-content\",\n  tileDescription: \"tile-description\",\n  tileHeading: \"tile-heading\",\n  tileLargeVisual: \"tile--large-visual\",\n  widthAuto: \"width-auto\",\n  widthFull: \"width-full\",\n};\n","$spacing: $baseline * 0.5;\n\n:host {\n  @apply block;\n\n  .container {\n    background-color: var(--calcite-color-foreground-1);\n    box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    block-size: 100%;\n    max-inline-size: 300px;\n    padding: $spacing;\n    position: relative;\n    vertical-align: top;\n    @apply transition-default;\n\n    &.checked {\n      @apply z-default;\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n\n    &.heading-only {\n      align-items: center;\n    }\n\n    &:not(.input-enabled) {\n      ::slotted(calcite-checkbox),\n      ::slotted(calcite-radio-button) {\n        @apply sr-only;\n      }\n    }\n\n    &.focused {\n      @apply focus-base;\n      &:not(.disabled) {\n        &:not(.input-enabled) {\n          @apply focus-inset;\n          outline-offset: -4px;\n          box-shadow: 0 0 0 1px var(--calcite-color-brand), inset 0 0 0 2px var(--calcite-color-foreground-1);\n        }\n      }\n    }\n\n    &.input-enabled {\n      &.input-alignment-start {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only,\n          &.description-only,\n          &.heading.description,\n          &.icon.description,\n          &.heading.icon.description {\n            display: inline-grid;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only,\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          gap: $spacing;\n        }\n        .tile {\n          @apply order-1;\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-start: $spacing;\n          }\n        }\n      }\n      &.input-alignment-end {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only {\n            display: inline-grid;\n            grid-gap: $spacing;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only {\n          gap: $spacing;\n        }\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n      }\n    }\n\n    &.width-full {\n      @apply flex max-w-none;\n      .tile {\n        @apply flex-auto;\n      }\n    }\n  }\n}\n\n.tile {\n  @apply bg-foreground-1\n    box-border\n    duration-150\n    ease-in-out\n    flex\n    flex-col\n    gap-2\n    pointer-events-none\n    select-none\n    text-color-3;\n}\n\n.tile-content-container {\n  @apply flex\n    focus-base\n    items-stretch\n    p-0\n    text-color-2\n    w-full;\n}\n\n.tile-content {\n  @apply flex\n    flex-auto\n    flex-col\n    gap-2;\n  // set width handles slotted content and heading word wrap\n  inline-size: 10%;\n}\n\n.tile-heading {\n  @apply break-words\n    duration-150\n    ease-in-out\n    font-medium\n    pointer-events-none\n    text-color-2\n    text-n1-wrap;\n}\n\n.tile-description {\n  @apply break-words\n    duration-150\n    ease-in-out\n    pointer-events-none\n    text-color-3\n    text-n2-wrap;\n}\n\n.tile--large-visual {\n  @apply grid justify-center\n    text-center;\n  min-block-size: theme(\"spacing.48\");\n  .icon {\n    @apply self-end;\n  }\n  calcite-icon {\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .tile-content-container {\n    @apply self-center;\n  }\n}\n\n:host(:hover) {\n  .container {\n    &:not(.input-enabled) {\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n  }\n}\n\n:host(:hover),\n.checked {\n  .tile-heading {\n    @apply text-color-1;\n  }\n  .tile-description {\n    @apply text-color-2;\n  }\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Alignment, Width } from \"../interfaces\";\nimport { TileSelectType } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-tile-select\",\n  styleUrl: \"tile-select.scss\",\n  shadow: true,\n})\nexport class TileSelect implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    this.input.checked = newChecked;\n  }\n\n  /** A description for the component, which displays below the heading. */\n  @Prop({ reflect: true }) description: string;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When `true`, the component is not displayed and is not focusable or checkable. */\n  @Prop({ reflect: true }) hidden = false;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name;\n\n  @Watch(\"name\")\n  nameChanged(newName: string): void {\n    this.input.name = newName;\n  }\n\n  /** When `true`, displays an interactive input based on the `type` property. */\n  @Prop({ reflect: true }) inputEnabled = false;\n\n  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */\n  @Prop({ reflect: true }) inputAlignment: Extract<\"end\" | \"start\", Alignment> = \"start\";\n\n  /**\n   * The selection mode of the component.\n   *\n   * Use radio for single selection, and checkbox for multiple selections.\n   */\n  @Prop({ reflect: true }) type: TileSelectType = \"radio\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Extract<\"auto\" | \"full\", Width> = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectElement;\n\n  private input: HTMLCalciteCheckboxElement | HTMLCalciteRadioButtonElement;\n\n  guid = `calcite-tile-select-${guid()}`;\n\n  //--------------------------------------------------------------------------\n  //\n  //  State\n  //\n  //--------------------------------------------------------------------------\n\n  /** The focused state of the tile-select. */\n  @State() focused = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits a custom change event.\n   *\n   * For checkboxes it emits when checked or unchecked.\n   *\n   * For radios it only emits when checked.\n   */\n  @Event({ cancelable: false }) calciteTileSelectChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return this.input?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteCheckboxChange\")\n  checkboxChangeHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.checked = checkbox.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalCheckboxFocus\")\n  @Listen(\"calciteInternalCheckboxBlur\")\n  checkboxFocusBlurHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.focused = event.detail;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalRadioButtonCheckedChange\")\n  radioButtonCheckedChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalRadioButtonFocus\")\n  @Listen(\"calciteInternalRadioButtonBlur\")\n  radioButtonFocusBlurHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.focused = radioButton.focused;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  clickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    const targets = [\"calcite-tile\", \"calcite-tile-select\"];\n    if (targets.includes(target.localName)) {\n      this.input.click();\n    }\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = true;\n    }\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.renderInput();\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.input.parentNode.removeChild(this.input);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderInput(): void {\n    this.input = document.createElement(\n      this.type === \"radio\" ? \"calcite-radio-button\" : \"calcite-checkbox\"\n    );\n    this.input.checked = this.checked;\n    this.input.disabled = this.disabled;\n    this.input.hidden = this.hidden;\n    this.input.id = this.guid;\n    this.input.label = this.heading || this.name || \"\";\n\n    if (this.name) {\n      this.input.name = this.name;\n    }\n\n    if (this.value) {\n      this.input.value = this.value != null ? this.value.toString() : \"\";\n    }\n\n    this.el.insertAdjacentElement(\"beforeend\", this.input);\n  }\n\n  render(): VNode {\n    const {\n      checked,\n      description,\n      disabled,\n      focused,\n      heading,\n      icon,\n      inputAlignment,\n      inputEnabled,\n      width,\n      iconFlipRtl,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const renderIcon = Boolean(icon);\n    return (\n      <div\n        class={{\n          checked,\n          container: true,\n          [CSS.description]: Boolean(description),\n          [CSS.descriptionOnly]: Boolean(!heading && !icon && description),\n          disabled,\n          focused,\n          [CSS.heading]: Boolean(heading),\n          [CSS.headingOnly]: heading && !icon && !description,\n          [CSS.icon]: renderIcon,\n          [CSS.iconOnly]: !heading && icon && !description,\n          [CSS.inputAlignmentEnd]: inputAlignment === \"end\",\n          [CSS.inputAlignmentStart]: inputAlignment === \"start\",\n          [CSS.inputEnabled]: inputEnabled,\n          [CSS.largeVisual]: isLargeVisual,\n          [CSS.widthAuto]: width === \"auto\",\n          [CSS.widthFull]: width === \"full\",\n        }}\n      >\n        <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>\n          {icon && (\n            <div class={{ [CSS.icon]: renderIcon }}>\n              <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />\n            </div>\n          )}\n          <div class={CSS.tileContentContainer}>\n            <div class={CSS.tileContent}>\n              {heading && <div class={CSS.tileHeading}>{heading}</div>}\n              {description && <div class={CSS.tileDescription}>{description}</div>}\n            </div>\n          </div>\n        </div>\n        <slot />\n      </div>\n    );\n  }\n}\n",":host {\n  @apply flex flex-wrap;\n  ::slotted(calcite-tile-select) {\n    @apply mb-px;\n    margin-inline-end: theme(\"spacing.px\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply flex-col;\n}\n\n@include disabled();\n@include base-component();\n","import { Component, Element, h, Prop, VNode } from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { TileSelectGroupLayout } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding `calcite-tile-select` elements.\n */\n@Component({\n  tag: \"calcite-tile-select-group\",\n  styleUrl: \"tile-select-group.scss\",\n  shadow: true,\n})\nexport class TileSelectGroup implements InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   */\n  @Prop({ reflect: true }) layout: TileSelectGroupLayout = \"horizontal\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  render(): VNode {\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"calcite-tile-select.calcite-tile-select-group.entry.cjs.js","mappings":"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","names":["guid","componentFocusable","connectInteractive","setUpLoadableComponent","setComponentLoaded","disconnectInteractive","updateHostInteraction","h","InteractiveContainer"],"sources":["src/components/tile-select/resources.ts","src/components/tile-select/tile-select.scss?tag=calcite-tile-select&encapsulation=shadow","src/components/tile-select/tile-select.tsx","src/components/tile-select-group/tile-select-group.scss?tag=calcite-tile-select-group&encapsulation=shadow","src/components/tile-select-group/tile-select-group.tsx"],"sourcesContent":["export const CSS = {\n  checked: \"checked\",\n  description: \"description\",\n  descriptionOnly: \"description-only\",\n  disabled: \"disabled\",\n  heading: \"heading\",\n  headingOnly: \"heading-only\",\n  icon: \"icon\",\n  iconOnly: \"icon-only\",\n  inputAlignmentEnd: \"input-alignment-end\",\n  inputAlignmentStart: \"input-alignment-start\",\n  inputEnabled: \"input-enabled\",\n  largeVisual: \"large-visual\",\n  tile: \"tile\",\n  tileContentContainer: \"tile-content-container\",\n  tileContent: \"tile-content\",\n  tileDescription: \"tile-description\",\n  tileHeading: \"tile-heading\",\n  tileLargeVisual: \"tile--large-visual\",\n  widthAuto: \"width-auto\",\n  widthFull: \"width-full\",\n};\n","$spacing: $baseline * 0.5;\n\n:host {\n  @apply block;\n\n  .container {\n    background-color: var(--calcite-color-foreground-1);\n    box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    block-size: 100%;\n    max-inline-size: 300px;\n    padding: $spacing;\n    position: relative;\n    vertical-align: top;\n    @apply transition-default;\n\n    &.checked {\n      @apply z-default;\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n\n    &.heading-only {\n      align-items: center;\n    }\n\n    &:not(.input-enabled) {\n      ::slotted(calcite-checkbox),\n      ::slotted(calcite-radio-button) {\n        @apply sr-only;\n      }\n    }\n\n    &.focused {\n      @apply focus-base;\n      &:not(.disabled) {\n        &:not(.input-enabled) {\n          @apply focus-inset;\n          outline-offset: -4px;\n          box-shadow: 0 0 0 1px var(--calcite-color-brand), inset 0 0 0 2px var(--calcite-color-foreground-1);\n        }\n      }\n    }\n\n    &.input-enabled {\n      &.input-alignment-start {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only,\n          &.description-only,\n          &.heading.description,\n          &.icon.description,\n          &.heading.icon.description {\n            display: inline-grid;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only,\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          gap: $spacing;\n        }\n        .tile {\n          @apply order-1;\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-start: $spacing;\n          }\n        }\n      }\n      &.input-alignment-end {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only {\n            display: inline-grid;\n            grid-gap: $spacing;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only {\n          gap: $spacing;\n        }\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n      }\n    }\n\n    &.width-full {\n      @apply flex max-w-none;\n      .tile {\n        @apply flex-auto;\n      }\n    }\n  }\n}\n\n.tile {\n  @apply bg-foreground-1\n    box-border\n    duration-150\n    ease-in-out\n    flex\n    flex-col\n    gap-2\n    pointer-events-none\n    select-none\n    text-color-3;\n}\n\n.tile-content-container {\n  @apply flex\n    focus-base\n    items-stretch\n    p-0\n    text-color-2\n    w-full;\n}\n\n.tile-content {\n  @apply flex\n    flex-auto\n    flex-col\n    gap-2;\n  // set width handles slotted content and heading word wrap\n  inline-size: 10%;\n}\n\n.tile-heading {\n  @apply break-words\n    duration-150\n    ease-in-out\n    font-medium\n    pointer-events-none\n    text-color-2\n    text-n1-wrap;\n}\n\n.tile-description {\n  @apply break-words\n    duration-150\n    ease-in-out\n    pointer-events-none\n    text-color-3\n    text-n2-wrap;\n}\n\n.tile--large-visual {\n  @apply grid justify-center\n    text-center;\n  min-block-size: theme(\"spacing.48\");\n  .icon {\n    @apply self-end;\n  }\n  calcite-icon {\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .tile-content-container {\n    @apply self-center;\n  }\n}\n\n:host(:hover) {\n  .container {\n    &:not(.input-enabled) {\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n  }\n}\n\n:host(:hover),\n.checked {\n  .tile-heading {\n    @apply text-color-1;\n  }\n  .tile-description {\n    @apply text-color-2;\n  }\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Alignment, Width } from \"../interfaces\";\nimport { TileSelectType } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-tile-select\",\n  styleUrl: \"tile-select.scss\",\n  shadow: true,\n})\nexport class TileSelect implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    this.input.checked = newChecked;\n  }\n\n  /** A description for the component, which displays below the heading. */\n  @Prop({ reflect: true }) description: string;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When `true`, the component is not displayed and is not focusable or checkable. */\n  @Prop({ reflect: true }) hidden = false;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name;\n\n  @Watch(\"name\")\n  nameChanged(newName: string): void {\n    this.input.name = newName;\n  }\n\n  /** When `true`, displays an interactive input based on the `type` property. */\n  @Prop({ reflect: true }) inputEnabled = false;\n\n  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */\n  @Prop({ reflect: true }) inputAlignment: Extract<\"end\" | \"start\", Alignment> = \"start\";\n\n  /**\n   * The selection mode of the component.\n   *\n   * Use radio for single selection, and checkbox for multiple selections.\n   */\n  @Prop({ reflect: true }) type: TileSelectType = \"radio\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Extract<\"auto\" | \"full\", Width> = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectElement;\n\n  private input: HTMLCalciteCheckboxElement | HTMLCalciteRadioButtonElement;\n\n  guid = `calcite-tile-select-${guid()}`;\n\n  //--------------------------------------------------------------------------\n  //\n  //  State\n  //\n  //--------------------------------------------------------------------------\n\n  /** The focused state of the tile-select. */\n  @State() focused = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits a custom change event.\n   *\n   * For checkboxes it emits when checked or unchecked.\n   *\n   * For radios it only emits when checked.\n   */\n  @Event({ cancelable: false }) calciteTileSelectChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return this.input?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteCheckboxChange\")\n  checkboxChangeHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.checked = checkbox.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalCheckboxFocus\")\n  @Listen(\"calciteInternalCheckboxBlur\")\n  checkboxFocusBlurHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.focused = event.detail;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalRadioButtonCheckedChange\")\n  radioButtonCheckedChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalRadioButtonFocus\")\n  @Listen(\"calciteInternalRadioButtonBlur\")\n  radioButtonFocusBlurHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.focused = radioButton.focused;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  clickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    const targets = [\"calcite-tile\", \"calcite-tile-select\"];\n    if (targets.includes(target.localName)) {\n      this.input.click();\n    }\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = true;\n    }\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.renderInput();\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.input.parentNode.removeChild(this.input);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderInput(): void {\n    this.input = document.createElement(\n      this.type === \"radio\" ? \"calcite-radio-button\" : \"calcite-checkbox\"\n    );\n    this.input.checked = this.checked;\n    this.input.disabled = this.disabled;\n    this.input.hidden = this.hidden;\n    this.input.id = this.guid;\n    this.input.label = this.heading || this.name || \"\";\n\n    if (this.name) {\n      this.input.name = this.name;\n    }\n\n    if (this.value) {\n      this.input.value = this.value != null ? this.value.toString() : \"\";\n    }\n\n    this.el.insertAdjacentElement(\"beforeend\", this.input);\n  }\n\n  render(): VNode {\n    const {\n      checked,\n      description,\n      disabled,\n      focused,\n      heading,\n      icon,\n      inputAlignment,\n      inputEnabled,\n      width,\n      iconFlipRtl,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const renderIcon = Boolean(icon);\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div\n          class={{\n            checked,\n            container: true,\n            [CSS.description]: Boolean(description),\n            [CSS.descriptionOnly]: Boolean(!heading && !icon && description),\n            disabled,\n            focused,\n            [CSS.heading]: Boolean(heading),\n            [CSS.headingOnly]: heading && !icon && !description,\n            [CSS.icon]: renderIcon,\n            [CSS.iconOnly]: !heading && icon && !description,\n            [CSS.inputAlignmentEnd]: inputAlignment === \"end\",\n            [CSS.inputAlignmentStart]: inputAlignment === \"start\",\n            [CSS.inputEnabled]: inputEnabled,\n            [CSS.largeVisual]: isLargeVisual,\n            [CSS.widthAuto]: width === \"auto\",\n            [CSS.widthFull]: width === \"full\",\n          }}\n        >\n          <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>\n            {icon && (\n              <div class={{ [CSS.icon]: renderIcon }}>\n                <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />\n              </div>\n            )}\n            <div class={CSS.tileContentContainer}>\n              <div class={CSS.tileContent}>\n                {heading && <div class={CSS.tileHeading}>{heading}</div>}\n                {description && <div class={CSS.tileDescription}>{description}</div>}\n              </div>\n            </div>\n          </div>\n          <slot />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n",":host {\n  @apply flex flex-wrap;\n  ::slotted(calcite-tile-select) {\n    @apply mb-px;\n    margin-inline-end: theme(\"spacing.px\");\n  }\n}\n\n:host([layout=\"vertical\"]) {\n  @apply flex-col;\n}\n\n@include disabled();\n@include base-component();\n","import { Component, Element, h, Prop, VNode } from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { TileSelectGroupLayout } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding `calcite-tile-select` elements.\n */\n@Component({\n  tag: \"calcite-tile-select-group\",\n  styleUrl: \"tile-select-group.scss\",\n  shadow: true,\n})\nexport class TileSelectGroup implements InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Defines the layout of the component.\n   *\n   * Use `\"horizontal\"` for rows, and `\"vertical\"` for a single column.\n   */\n  @Prop({ reflect: true }) layout: TileSelectGroupLayout = \"horizontal\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  render(): VNode {\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <slot />\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-tile.cjs.entry.js

@@ -1,27 +1,27 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const conditionalSlot = require('./conditionalSlot-a6a1ea4e.js');
-const dom = require('./dom-afcc4f08.js');
-const interactive = require('./interactive-04057cf9.js');
-require('./observers-20febba7.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./browser-843700f4.js');
+const index = require('./index-c3a85d17.js');
+const conditionalSlot = require('./conditionalSlot-d6481e20.js');
+const dom = require('./dom-526ae93a.js');
+const interactive = require('./interactive-77fbebed.js');
+require('./observers-63095bd4.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./browser-767f345c.js');
 
 const SLOTS = {
     contentStart: "content-start",
     contentEnd: "content-end",
 };
 
-const tileCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{box-sizing:border-box;display:inline-block;-webkit-user-select:none;user-select:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .container{pointer-events:none;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:0.5rem}:host .content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:0.5rem;inline-size:10%}:host .content-container{display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;padding:0px;color:var(--calcite-color-text-2);outline-color:transparent}:host .content-slot-container{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1)}:host .content-slot-container:first-child{padding-inline:0 0.75rem}:host .content-slot-container:last-child{padding-inline:0.75rem 0}:host .heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .large-visual{align-items:center;text-align:center;min-block-size:12rem}:host .large-visual .icon{display:flex;justify-content:center;align-self:flex-end}:host .large-visual .content-container{align-self:center}:host .description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([href]) .heading,:host([href]:hover) .heading{text-decoration-line:underline;color:var(--calcite-color-text-link)}:host(:not([embed])){padding:0.75rem;box-shadow:0 0 0 1px var(--calcite-color-border-2)}:host(:not([embed])[href]:hover){cursor:pointer;box-shadow:0 0 0 2px var(--calcite-color-brand)}:host(:not([embed])[href]:active){box-shadow:0 0 0 3px var(--calcite-color-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]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host(:hover) .heading,:host([active]) .heading{color:var(--calcite-color-text-1)}:host(:hover) .description,:host([active]) .description{color:var(--calcite-color-text-2)}:host([hidden]){display:none}[hidden]{display:none}";
+const tileCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{box-sizing:border-box;display:inline-block;-webkit-user-select:none;user-select:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .container{pointer-events:none;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:0.5rem}:host .content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:0.5rem;inline-size:10%}:host .content-container{display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;padding:0px;color:var(--calcite-color-text-2);outline-color:transparent}:host .content-slot-container{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1)}:host .content-slot-container:first-child{padding-inline:0 0.75rem}:host .content-slot-container:last-child{padding-inline:0.75rem 0}:host .heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .large-visual{align-items:center;text-align:center;min-block-size:12rem}:host .large-visual .icon{display:flex;justify-content:center;align-self:flex-end}:host .large-visual .content-container{align-self:center}:host .description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([href]) .heading,:host([href]:hover) .heading{text-decoration-line:underline;color:var(--calcite-color-text-link)}:host(:not([embed])){padding:0.75rem;box-shadow:0 0 0 1px var(--calcite-color-border-2)}:host(:not([embed])[href]:hover){cursor:pointer;box-shadow:0 0 0 2px var(--calcite-color-brand)}:host(:not([embed])[href]:active){box-shadow:0 0 0 3px var(--calcite-color-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]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host(:hover) .heading,:host([active]) .heading{color:var(--calcite-color-text-1)}:host(:hover) .description,:host([active]) .description{color:var(--calcite-color-text-2)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Tile = class {
     constructor(hostRef) {
@@ -70,7 +70,8 @@ const Tile = class {
         return (index.h("div", { class: { container: true, "large-visual": isLargeVisual } }, icon && (index.h("div", { class: "icon" }, index.h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l", style: iconStyle }))), index.h("div", { class: "content-container" }, dom.getSlotted(el, SLOTS.contentStart) ? (index.h("div", { class: "content-slot-container" }, index.h("slot", { name: SLOTS.contentStart }))) : null, index.h("div", { class: "content" }, heading && index.h("div", { class: "heading" }, heading), description && index.h("div", { class: "description" }, description)), dom.getSlotted(el, SLOTS.contentEnd) ? (index.h("div", { class: "content-slot-container" }, index.h("slot", { name: SLOTS.contentEnd }))) : null)));
     }
     render() {
-        return (index.h(index.Fragment, null, this.href ? (index.h("calcite-link", { disabled: this.disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        const { disabled } = this;
+        return (index.h(interactive.InteractiveContainer, { disabled: disabled }, this.href ? (index.h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/calcite-tile.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-tile.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;AAAO,MAAM,KAAK,GAAG;IACnB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;CAC1B;;ACHD,MAAM,OAAO,GAAG,osFAAosF;;MCwBvsF,IAAI;;;sBAUmB,KAAK;;wBAUH,KAAK;qBAOR,KAAK;uBAOH,KAAK;;sBAMN,KAAK;;;2BAUA,KAAK;;;;;;;IAgB5C,iBAAiB;QACfA,+CAA+B,CAAC,IAAI,CAAC,CAAC;QACtCC,8BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,kDAAkC,CAAC,IAAI,CAAC,CAAC;QACzCC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,UAAU;QACR,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7D,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QACtD,MAAM,SAAS,GAAG,aAAa;cAC3B;gBACE,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;cACD,SAAS,CAAC;QAEd,QACEC,iBAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,aAAa,EAAE,IAC3D,IAAI,KACHA,iBAAK,KAAK,EAAC,MAAM,IACfA,0BAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,SAAS,GAAI,CAC1E,CACP,EACDA,iBAAK,KAAK,EAAC,mBAAmB,IAC3BC,cAAU,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,IACjCD,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAE,KAAK,CAAC,YAAY,GAAI,CAC9B,IACJ,IAAI,EACRA,iBAAK,KAAK,EAAC,SAAS,IACjB,OAAO,IAAIA,iBAAK,KAAK,EAAC,SAAS,IAAE,OAAO,CAAO,EAC/C,WAAW,IAAIA,iBAAK,KAAK,EAAC,aAAa,IAAE,WAAW,CAAO,CACxD,EACLC,cAAU,CAAC,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,IAC/BD,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI,CAC5B,IACJ,IAAI,CACJ,CACF,EACN;KACH;IAED,MAAM;QACJ,QACEA,QAACE,cAAQ,QACN,IAAI,CAAC,IAAI,IACRF,0BAAc,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACnD,IAAI,CAAC,UAAU,EAAE,CACL,KAEf,IAAI,CAAC,UAAU,EAAE,CAClB,CACQ,EACX;KACH;;;;;;;","names":["connectConditionalSlotComponent","connectInteractive","disconnectConditionalSlotComponent","disconnectInteractive","updateHostInteraction","h","getSlotted","Fragment"],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const SLOTS = {\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-3\n    box-border\n    inline-block\n    select-none\n    duration-150\n    ease-in-out;\n\n  .container {\n    @apply pointer-events-none\n  grid\n  grid-cols-1\n  gap-2;\n  }\n\n  .content {\n    @apply flex\n  flex-auto\n  flex-col\n  justify-center\n  gap-2;\n    // set width handles slotted content and heading word wrap\n    inline-size: 10%;\n  }\n\n  .content-container {\n    @apply focus-base\n  text-color-2\n  flex\n  w-full\n  flex-auto\n  items-stretch\n  p-0;\n  }\n\n  .content-slot-container {\n    @apply bg-foreground-1 flex items-center;\n\n    &:first-child {\n      padding-inline: 0 0.75rem;\n    }\n\n    &:last-child {\n      padding-inline: 0.75rem 0;\n    }\n  }\n\n  .heading {\n    @apply text-n1-wrap\n    text-color-2\n    pointer-events-none\n    break-words\n    font-medium\n    duration-150\n    ease-in-out;\n  }\n  .large-visual {\n    @apply items-center\n      text-center;\n    min-block-size: theme(\"spacing.48\");\n    .icon {\n      @apply flex\n        justify-center\n        self-end;\n    }\n    .content-container {\n      @apply self-center;\n    }\n  }\n  .description {\n    @apply text-n2-wrap\n    text-color-3\n    break-words\n    pointer-events-none\n    duration-150\n    ease-in-out;\n  }\n}\n:host([href]),\n:host([href]:hover) {\n  .heading {\n    @apply underline;\n    color: var(--calcite-color-text-link);\n  }\n}\n:host(:not([embed])) {\n  @apply p-3;\n  box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n}\n:host(:not([embed])[href]:hover) {\n  @apply cursor-pointer;\n  box-shadow: 0 0 0 2px var(--calcite-color-brand);\n}\n:host(:not([embed])[href]:active) {\n  box-shadow: 0 0 0 3px var(--calcite-color-brand);\n}\n:host([icon][heading]:not([description]):not([embed])) {\n  @apply p-0;\n}\n:host([icon][heading]:not([description])) {\n  .icon {\n    @apply flex justify-center;\n  }\n  .large-visual {\n    @apply text-center;\n  }\n}\n\n@include disabled();\n\n:host(:hover),\n:host([active]) {\n  .heading {\n    @apply text-color-1;\n  }\n  .description {\n    @apply text-color-2;\n  }\n}\n\n@include base-component();\n","import { Component, Element, Fragment, h, Prop, VNode } from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SLOTS } from \"./resources\";\n\n/**\n * @slot content-start - A slot for adding non-actionable elements before the component's content.\n * @slot content-end - A slot for adding non-actionable elements after the component's content.\n */\n@Component({\n  tag: \"calcite-tile\",\n  styleUrl: \"tile.scss\",\n  shadow: true,\n})\nexport class Tile implements ConditionalSlotComponent, InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop({ reflect: true }) description: string;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's embed mode.\n   *\n   * When `true`, renders without a border and padding for use by other components.\n   */\n  @Prop({ reflect: true }) embed = false;\n\n  /**\n   * The focused state of the component.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) focused = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When `true`, the component is not displayed and is not focusable.  */\n  @Prop({ reflect: true }) hidden = false;\n\n  /** When embed is `\"false\"`, the URL for the component. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTile(): VNode {\n    const { icon, el, heading, description, iconFlipRtl } = this;\n    const isLargeVisual = heading && icon && !description;\n    const iconStyle = isLargeVisual\n      ? {\n          height: \"64px\",\n          width: \"64px\",\n        }\n      : undefined;\n\n    return (\n      <div class={{ container: true, \"large-visual\": isLargeVisual }}>\n        {icon && (\n          <div class=\"icon\">\n            <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" style={iconStyle} />\n          </div>\n        )}\n        <div class=\"content-container\">\n          {getSlotted(el, SLOTS.contentStart) ? (\n            <div class=\"content-slot-container\">\n              <slot name={SLOTS.contentStart} />\n            </div>\n          ) : null}\n          <div class=\"content\">\n            {heading && <div class=\"heading\">{heading}</div>}\n            {description && <div class=\"description\">{description}</div>}\n          </div>\n          {getSlotted(el, SLOTS.contentEnd) ? (\n            <div class=\"content-slot-container\">\n              <slot name={SLOTS.contentEnd} />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        {this.href ? (\n          <calcite-link disabled={this.disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;AAAO,MAAM,KAAK,GAAG;IACnB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;CAC1B;;ACHD,MAAM,OAAO,GAAG,4uFAA4uF;;MCyB/uF,IAAI;;;sBAUmB,KAAK;;wBAUH,KAAK;qBAOR,KAAK;uBAOH,KAAK;;sBAMN,KAAK;;;2BAUA,KAAK;;;;;;;IAgB5C,iBAAiB;QACfA,+CAA+B,CAAC,IAAI,CAAC,CAAC;QACtCC,8BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,kDAAkC,CAAC,IAAI,CAAC,CAAC;QACzCC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,UAAU;QACR,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC7D,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QACtD,MAAM,SAAS,GAAG,aAAa;cAC3B;gBACE,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;cACD,SAAS,CAAC;QAEd,QACEC,iBAAK,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,aAAa,EAAE,IAC3D,IAAI,KACHA,iBAAK,KAAK,EAAC,MAAM,IACfA,0BAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,SAAS,GAAI,CAC1E,CACP,EACDA,iBAAK,KAAK,EAAC,mBAAmB,IAC3BC,cAAU,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,IACjCD,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAE,KAAK,CAAC,YAAY,GAAI,CAC9B,IACJ,IAAI,EACRA,iBAAK,KAAK,EAAC,SAAS,IACjB,OAAO,IAAIA,iBAAK,KAAK,EAAC,SAAS,IAAE,OAAO,CAAO,EAC/C,WAAW,IAAIA,iBAAK,KAAK,EAAC,aAAa,IAAE,WAAW,CAAO,CACxD,EACLC,cAAU,CAAC,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,IAC/BD,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI,CAC5B,IACJ,IAAI,CACJ,CACF,EACN;KACH;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,QACEA,QAACE,gCAAoB,IAAC,QAAQ,EAAE,QAAQ,IACrC,IAAI,CAAC,IAAI,IACRF,0BAAc,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC9C,IAAI,CAAC,UAAU,EAAE,CACL,KAEf,IAAI,CAAC,UAAU,EAAE,CAClB,CACoB,EACvB;KACH;;;;;;;","names":["connectConditionalSlotComponent","connectInteractive","disconnectConditionalSlotComponent","disconnectInteractive","updateHostInteraction","h","getSlotted","InteractiveContainer"],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const SLOTS = {\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-3\n    box-border\n    inline-block\n    select-none\n    duration-150\n    ease-in-out;\n\n  .container {\n    @apply pointer-events-none\n  grid\n  grid-cols-1\n  gap-2;\n  }\n\n  .content {\n    @apply flex\n  flex-auto\n  flex-col\n  justify-center\n  gap-2;\n    // set width handles slotted content and heading word wrap\n    inline-size: 10%;\n  }\n\n  .content-container {\n    @apply focus-base\n  text-color-2\n  flex\n  w-full\n  flex-auto\n  items-stretch\n  p-0;\n  }\n\n  .content-slot-container {\n    @apply bg-foreground-1 flex items-center;\n\n    &:first-child {\n      padding-inline: 0 0.75rem;\n    }\n\n    &:last-child {\n      padding-inline: 0.75rem 0;\n    }\n  }\n\n  .heading {\n    @apply text-n1-wrap\n    text-color-2\n    pointer-events-none\n    break-words\n    font-medium\n    duration-150\n    ease-in-out;\n  }\n  .large-visual {\n    @apply items-center\n      text-center;\n    min-block-size: theme(\"spacing.48\");\n    .icon {\n      @apply flex\n        justify-center\n        self-end;\n    }\n    .content-container {\n      @apply self-center;\n    }\n  }\n  .description {\n    @apply text-n2-wrap\n    text-color-3\n    break-words\n    pointer-events-none\n    duration-150\n    ease-in-out;\n  }\n}\n:host([href]),\n:host([href]:hover) {\n  .heading {\n    @apply underline;\n    color: var(--calcite-color-text-link);\n  }\n}\n:host(:not([embed])) {\n  @apply p-3;\n  box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n}\n:host(:not([embed])[href]:hover) {\n  @apply cursor-pointer;\n  box-shadow: 0 0 0 2px var(--calcite-color-brand);\n}\n:host(:not([embed])[href]:active) {\n  box-shadow: 0 0 0 3px var(--calcite-color-brand);\n}\n:host([icon][heading]:not([description]):not([embed])) {\n  @apply p-0;\n}\n:host([icon][heading]:not([description])) {\n  .icon {\n    @apply flex justify-center;\n  }\n  .large-visual {\n    @apply text-center;\n  }\n}\n\n@include disabled();\n\n:host(:hover),\n:host([active]) {\n  .heading {\n    @apply text-color-1;\n  }\n  .description {\n    @apply text-color-2;\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Prop, VNode } from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SLOTS } from \"./resources\";\n\n/**\n * @slot content-start - A slot for adding non-actionable elements before the component's content.\n * @slot content-end - A slot for adding non-actionable elements after the component's content.\n */\n@Component({\n  tag: \"calcite-tile\",\n  styleUrl: \"tile.scss\",\n  shadow: true,\n})\nexport class Tile implements ConditionalSlotComponent, InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop({ reflect: true }) description: string;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's embed mode.\n   *\n   * When `true`, renders without a border and padding for use by other components.\n   */\n  @Prop({ reflect: true }) embed = false;\n\n  /**\n   * The focused state of the component.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) focused = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When `true`, the component is not displayed and is not focusable.  */\n  @Prop({ reflect: true }) hidden = false;\n\n  /** When embed is `\"false\"`, the URL for the component. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTile(): VNode {\n    const { icon, el, heading, description, iconFlipRtl } = this;\n    const isLargeVisual = heading && icon && !description;\n    const iconStyle = isLargeVisual\n      ? {\n          height: \"64px\",\n          width: \"64px\",\n        }\n      : undefined;\n\n    return (\n      <div class={{ container: true, \"large-visual\": isLargeVisual }}>\n        {icon && (\n          <div class=\"icon\">\n            <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" style={iconStyle} />\n          </div>\n        )}\n        <div class=\"content-container\">\n          {getSlotted(el, SLOTS.contentStart) ? (\n            <div class=\"content-slot-container\">\n              <slot name={SLOTS.contentStart} />\n            </div>\n          ) : null}\n          <div class=\"content\">\n            {heading && <div class=\"heading\">{heading}</div>}\n            {description && <div class=\"description\">{description}</div>}\n          </div>\n          {getSlotted(el, SLOTS.contentEnd) ? (\n            <div class=\"content-slot-container\">\n              <slot name={SLOTS.contentEnd} />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-tip_3.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const conditionalSlot = require('./conditionalSlot-a6a1ea4e.js');
-const dom = require('./dom-afcc4f08.js');
-const locale = require('./locale-f3c5ce8e.js');
-const t9n = require('./t9n-7ada50fb.js');
-const Heading = require('./Heading-b270a97e.js');
-const observers = require('./observers-20febba7.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./key-f65f1f51.js');
+const index = require('./index-c3a85d17.js');
+const conditionalSlot = require('./conditionalSlot-d6481e20.js');
+const dom = require('./dom-526ae93a.js');
+const locale = require('./locale-cb432455.js');
+const t9n = require('./t9n-f6dc9b37.js');
+const Heading = require('./Heading-1df6c522.js');
+const observers = require('./observers-63095bd4.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./key-c7167eca.js');
 
 const CSS$1 = {
     container: "container",

package/dist/cjs/calcite-tooltip.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const dom = require('./dom-afcc4f08.js');
-const floatingUi = require('./floating-ui-4820f72b.js');
-const guid = require('./guid-9272df1b.js');
-const openCloseComponent = require('./openCloseComponent-a24661c6.js');
-const FloatingArrow = require('./FloatingArrow-cc9cd375.js');
-require('./resources-aeedfe4f.js');
-require('./debounce-5f6f9a5a.js');
+const index = require('./index-c3a85d17.js');
+const dom = require('./dom-526ae93a.js');
+const floatingUi = require('./floating-ui-0f73db12.js');
+const guid = require('./guid-2999da4b.js');
+const openCloseComponent = require('./openCloseComponent-38872c79.js');
+const FloatingArrow = require('./FloatingArrow-efd489b7.js');
+require('./resources-2f0b38c2.js');
+require('./debounce-b72abe80.js');
 
 const CSS = {
     container: "container",

package/dist/cjs/calcite-tree_2.cjs.entry.js

@@ -1,21 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const dom = require('./dom-afcc4f08.js');
-const conditionalSlot = require('./conditionalSlot-a6a1ea4e.js');
-const interactive = require('./interactive-04057cf9.js');
-const resources = require('./resources-aeedfe4f.js');
-const component = require('./component-f4c2ecd4.js');
-require('./guid-9272df1b.js');
-require('./observers-20febba7.js');
-require('./browser-843700f4.js');
+const index = require('./index-c3a85d17.js');
+const dom = require('./dom-526ae93a.js');
+const conditionalSlot = require('./conditionalSlot-d6481e20.js');
+const interactive = require('./interactive-77fbebed.js');
+const resources = require('./resources-2f0b38c2.js');
+const component = require('./component-8b8d846d.js');
+require('./guid-2999da4b.js');
+require('./observers-63095bd4.js');
+require('./browser-767f345c.js');
 
 function isTreeItem(element) {
     return element?.tagName === "CALCITE-TREE-ITEM";
@@ -335,7 +335,7 @@ const ICONS = {
     blank: "blank",
 };
 
-const treeItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-color-text-3)}.node-actions-container{display:flex}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-actions-container{min-block-size:1.5rem}:host([scale=s]) .node-actions-container .node-container .checkbox,:host([scale=s]) .node-actions-container .node-container .chevron,:host([scale=s]) .node-actions-container .node-container .checkmark,:host([scale=s]) .node-actions-container .node-container .bullet-point{margin-inline:0.25rem}:host([scale=s]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-actions-container{min-block-size:2rem}:host([scale=m]) .node-actions-container .node-container .checkbox,:host([scale=m]) .node-actions-container .node-container .chevron,:host([scale=m]) .node-actions-container .node-container .checkmark,:host([scale=m]) .node-actions-container .node-container .bullet-point{margin-inline:0.5rem}:host([scale=m]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-actions-container{min-block-size:2.75rem}:host([scale=l]) .node-actions-container .node-container .checkbox,:host([scale=l]) .node-actions-container .node-container .chevron,:host([scale=l]) .node-actions-container .node-container .checkmark,:host([scale=l]) .node-actions-container .node-container .bullet-point{margin-inline:0.75rem}:host([scale=l]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-color-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-color-brand)}:host([hidden]){display:none}[hidden]{display:none}";
+const treeItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-color-text-3)}.node-actions-container{display:flex}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-actions-container{min-block-size:1.5rem}:host([scale=s]) .node-actions-container .node-container .checkbox,:host([scale=s]) .node-actions-container .node-container .chevron,:host([scale=s]) .node-actions-container .node-container .checkmark,:host([scale=s]) .node-actions-container .node-container .bullet-point{margin-inline:0.25rem}:host([scale=s]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-actions-container{min-block-size:2rem}:host([scale=m]) .node-actions-container .node-container .checkbox,:host([scale=m]) .node-actions-container .node-container .chevron,:host([scale=m]) .node-actions-container .node-container .checkmark,:host([scale=m]) .node-actions-container .node-container .bullet-point{margin-inline:0.5rem}:host([scale=m]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-actions-container{min-block-size:2.75rem}:host([scale=l]) .node-actions-container .node-container .checkbox,:host([scale=l]) .node-actions-container .node-container .chevron,:host([scale=l]) .node-actions-container .node-container .checkmark,:host([scale=l]) .node-actions-container .node-container .bullet-point{margin-inline:0.75rem}:host([scale=l]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-color-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-color-brand)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TreeItem = class {
     constructor(hostRef) {
@@ -437,8 +437,7 @@ const TreeItem = class {
         this.updateAncestorTree();
     }
     componentDidRender() {
-        interactive.updateHostInteraction(this, () => false // programmatically focusable
-        );
+        interactive.updateHostInteraction(this);
     }
     render() {
         const rtl = dom.getElementDir(this.el) === "rtl";
@@ -468,7 +467,7 @@ const TreeItem = class {
         const { hasEndActions } = this;
         const slotNode = (index.h("slot", { key: "actionsEndSlot", name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
         const iconStartEl = (index.h("calcite-icon", { class: CSS.iconStart, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
-        return (index.h(index.Host, { "aria-expanded": this.hasChildren ? dom.toAriaBoolean(isExpanded) : undefined, "aria-hidden": dom.toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem" }, index.h("div", { class: { [CSS.itemExpanded]: isExpanded } }, index.h("div", { class: CSS.nodeAndActionsContainer }, index.h("div", { class: {
+        return (index.h(index.Host, { "aria-expanded": this.hasChildren ? dom.toAriaBoolean(isExpanded) : undefined, "aria-hidden": dom.toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabIndex: this.disabled ? -1 : 0 }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { class: { [CSS.itemExpanded]: isExpanded } }, index.h("div", { class: CSS.nodeAndActionsContainer }, index.h("div", { class: {
                 [CSS.nodeContainer]: true,
                 [resources.CSS_UTILITY.rtl]: rtl,
             }, "data-selection-mode": this.selectionMode,
@@ -476,7 +475,7 @@ const TreeItem = class {
             ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), index.h("div", { class: CSS.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), index.h("div", { class: {
                 [CSS.childrenContainer]: true,
                 [resources.CSS_UTILITY.rtl]: rtl,
-            }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined }, index.h("slot", { name: SLOTS.children })))));
+            }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined }, index.h("slot", { name: SLOTS.children }))))));
     }
     //--------------------------------------------------------------------------
     //