@esri/solutions-components 0.8.11 → 0.8.13

package/dist/components/calcite-tile.js

@@ -3,40 +3,105 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { a as getSlotted } from './dom.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { t as toAriaBoolean } from './dom.js';
+import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './link.js';
 
 /*!
  * 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.4.0
+ * v2.8.2
  */
+const CSS = {
+    column: "column",
+    container: "container",
+    contentContainer: "content-container",
+    description: "description",
+    heading: "heading",
+    interactive: "interactive",
+    largeVisualDeprecated: "large-visual-deprecated",
+    row: "row",
+    selected: "selected",
+    selectionIcon: "selection-icon",
+    textContent: "text-content",
+};
+const ICONS = {
+    selectedMultiple: "check-square-f",
+    selectedSingle: "circle-f",
+    unselectedMultiple: "square",
+    unselectedSingle: "circle",
+};
 const SLOTS = {
-    contentStart: "content-start",
+    contentBottom: "content-bottom",
     contentEnd: "content-end",
+    contentStart: "content-start",
+    contentTop: "content-top",
 };
 
-const tileCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;-moz-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:var(--calcite-spacing-md)}:host .content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;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}: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;color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1);font-weight:500;line-height:1.20313rem}:host .large-visual{align-items:center;text-align:center;min-block-size:12rem}:host .large-visual calcite-icon{align-self:self-end;block-size:64px;inline-size:64px;justify-self:center}:host .large-visual .content-container{align-self:center}:host .description{pointer-events:none;overflow-wrap:break-word;color:var(--calcite-color-text-3);font-size:var(--calcite-font-size--2);font-weight:400;line-height:1.03125rem}:host([scale=s]) .container{gap:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=s]) .description{font-size:var(--calcite-font-size--3);line-height:0.85938rem}:host([scale=l]) .container{gap:var(--calcite-spacing-xl)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0);line-height:1.375rem}:host([scale=l]) .description{font-size:var(--calcite-font-size--1);line-height:1.20313rem}:host(:not([href])) calcite-icon{color:var(--calcite-color-text-3)}:host([href]) .heading,:host([href]:hover) .heading{-webkit-text-decoration-line:underline;text-decoration-line:underline;color:var(--calcite-color-text-link)}:host(:not([embed])){box-shadow:0 0 0 1px var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}:host(:not([embed])[scale=s]){padding:var(--calcite-spacing-sm)}:host(:not([embed])[scale=l]){padding:var(--calcite-spacing-xl)}: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([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 tileCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-tile-background-color:var(--calcite-color-foreground-1);--calcite-tile-border-color:var(--calcite-color-border-2);--calcite-tile-description-text-color:var(--calcite-color-text-3);--calcite-tile-heading-text-color:var(--calcite-color-text-2);--calcite-ui-icon-color:var(--calcite-color-text-3);box-sizing:border-box;display:inline-block}.container{background-color:var(--calcite-tile-background-color);block-size:var(--calcite-container-size-content-fluid);box-sizing:border-box;inline-size:var(--calcite-container-size-content-fluid);outline:var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.container.interactive{cursor:pointer}.container.interactive:hover,.container.interactive:focus,.container.interactive.selected{outline-color:var(--calcite-color-brand);position:relative}.container.interactive:hover .selection-icon,.container.interactive:focus .selection-icon,.container.interactive.selected .selection-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}.container.interactive.selected{z-index:var(--calcite-z-index)}.container.interactive:focus{box-shadow:inset 0px 0px 0px 1px var(--calcite-color-brand);z-index:var(--calcite-z-index-sticky)}.column,.row{align-items:flex-start;display:flex}.column{flex-direction:column}.content-container{inline-size:100%;outline-color:transparent;padding:0}.text-content{display:flex;flex-direction:column}.heading{color:var(--calcite-tile-heading-text-color);font-weight:var(--calcite-font-weight-medium);line-height:1.20313rem;overflow-wrap:break-word}.large-visual-deprecated{align-items:center;justify-content:center;min-block-size:12rem;text-align:center}.large-visual-deprecated calcite-icon{align-self:center;block-size:64px;inline-size:64px}.large-visual-deprecated .content-container{justify-content:center}.description{color:var(--calcite-tile-description-text-color);font-weight:var(--calcite-font-weight-regular);overflow-wrap:break-word}:host([alignment=center]) .row,:host([alignment=center]) .column{align-items:center;text-align:center}:host([alignment=center]) slot[name=content-start]::slotted(*),:host([alignment=center]) slot[name=content-end]::slotted(*){align-self:center}:host([scale=s]){max-inline-size:400px;min-inline-size:100px}:host([scale=s]) .container{padding:var(--calcite-spacing-sm)}:host([scale=s]) .column,:host([scale=s]) .row{gap:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=s]) .description{font-size:var(--calcite-font-size--3);line-height:0.85938rem}:host([scale=m]){max-inline-size:460px;min-inline-size:140px}:host([scale=m]) .container{padding:var(--calcite-spacing-md)}:host([scale=m]) .column,:host([scale=m]) .row{gap:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size--1);line-height:1.20313rem}:host([scale=m]) .description{font-size:var(--calcite-font-size--2);line-height:1.03125rem}:host([scale=l]){max-inline-size:520px;min-inline-size:160px}:host([scale=l]) .container{padding:var(--calcite-spacing-xl)}:host([scale=l]) .column,:host([scale=l]) .row{gap:var(--calcite-spacing-xl)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-0);line-height:1.375rem}:host([scale=l]) .description{font-size:var(--calcite-font-size--1);line-height:1.20313rem}:host([selection-appearance=border][layout=horizontal]) .container.selected:focus::before,:host([selection-appearance=border][layout=vertical]) .container.selected:focus::before{block-size:100%;box-shadow:inset 0px 0px 0px 1px var(--calcite-color-brand);content:\"\";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute}:host([selection-appearance=border][layout=horizontal]) .container.selected{box-shadow:inset 0px -4px 0px 0px var(--calcite-color-brand)}:host([selection-appearance=border][layout=vertical]) .container.selected{box-shadow:inset 4px 0px 0px 0px var(--calcite-color-brand)}:host([href]:focus:not([disabled])),:host([href]:hover:not([disabled])){--calcite-tile-border-color:var(--calcite-color-text-link);--calcite-tile-heading-text-color:var(--calcite-color-text-link);--calcite-ui-icon-color:var(--calcite-color-text-link)}:host([href]:focus:not([disabled])) .container,:host([href]:hover:not([disabled])) .container{position:relative;z-index:var(--calcite-z-index)}:host([href]:active:not([disabled])) .container{box-shadow:0 0 0 3px var(--calcite-tile-border-color)}:host([embed]) .container{box-shadow:none;padding:0}:host([selection-mode=none]) .container{outline-color:var(--calcite-tile-border-color)}:host([selection-mode=none]) .container:focus{outline-color:var(--calcite-color-brand);position:relative}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host(:hover:not([disabled])),:host([active]:not([disabled])){--calcite-tile-description-text-color:var(--calcite-color-text-2);--calcite-tile-heading-text-color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTileStyle0 = tileCss;
 
 const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.calciteInternalTileKeyEvent = createEvent(this, "calciteInternalTileKeyEvent", 6);
+        this.calciteTileSelect = createEvent(this, "calciteTileSelect", 7);
+        this.clickHandler = () => {
+            if (this.interactive) {
+                this.setFocus();
+                this.handleSelectEvent();
+            }
+        };
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleSelectEvent = () => {
+            if (this.disabled ||
+                !this.interactive ||
+                (this.selectionMode === "single-persist" && this.selected === true)) {
+                return;
+            }
+            this.calciteTileSelect.emit();
+        };
+        this.setContainerEl = (el) => {
+            this.containerEl = el;
+        };
         this.active = false;
+        this.alignment = "start";
         this.description = undefined;
         this.disabled = false;
         this.embed = false;
-        this.focused = false;
         this.heading = undefined;
         this.href = undefined;
         this.icon = undefined;
         this.iconFlipRtl = false;
+        this.interactive = false;
+        this.label = undefined;
+        this.layout = "horizontal";
         this.scale = "m";
+        this.selected = false;
+        this.selectionAppearance = "icon";
+        this.selectionMode = "none";
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        var _a;
+        await componentFocusable(this);
+        if (!this.disabled && this.interactive) {
+            (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }
     // --------------------------------------------------------------------------
     //
@@ -44,44 +109,110 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectConditionalSlotComponent(this);
         connectInteractive(this);
     }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
     disconnectedCallback() {
-        disconnectConditionalSlotComponent(this);
         disconnectInteractive(this);
     }
     componentDidRender() {
         updateHostInteraction(this);
     }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    keyDownHandler(event) {
+        if (event.target === this.el) {
+            switch (event.key) {
+                case " ":
+                case "Enter":
+                    this.handleSelectEvent();
+                    event.preventDefault();
+                    break;
+                case "ArrowDown":
+                case "ArrowLeft":
+                case "ArrowRight":
+                case "ArrowUp":
+                case "Home":
+                case "End":
+                    this.calciteInternalTileKeyEvent.emit(event);
+                    event.preventDefault();
+                    break;
+            }
+        }
+    }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
     //
     // --------------------------------------------------------------------------
+    renderSelectionIcon() {
+        const { selected, selectionAppearance, selectionMode } = this;
+        if (selectionAppearance === "icon" && selectionMode !== "none") {
+            return (h("calcite-icon", { class: CSS.selectionIcon, icon: selected
+                    ? selectionMode === "multiple"
+                        ? ICONS.selectedMultiple
+                        : ICONS.selectedSingle
+                    : selectionMode === "multiple"
+                        ? ICONS.unselectedMultiple
+                        : ICONS.unselectedSingle, scale: "s" }));
+        }
+        return;
+    }
     renderTile() {
-        const { icon, el, heading, description, iconFlipRtl } = this;
-        const isLargeVisual = heading && icon && !description;
-        return (h("div", { class: { container: true, "large-visual": isLargeVisual } }, icon && h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l" }), h("div", { class: "content-container" }, getSlotted(el, SLOTS.contentStart) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentStart }))) : null, h("div", { class: "content" }, heading && h("div", { class: "heading" }, heading), description && h("div", { class: "description" }, description)), getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentEnd }))) : null)));
+        const { description, disabled, heading, icon, iconFlipRtl, interactive, selectionMode } = this;
+        const isLargeVisual = heading && icon && !Boolean(description);
+        const disableInteraction = Boolean(this.href) || !interactive;
+        const role = selectionMode === "multiple" && interactive
+            ? "checkbox"
+            : selectionMode !== "none" && interactive
+                ? "radio"
+                : interactive
+                    ? "button"
+                    : undefined;
+        return (h("div", { "aria-checked": selectionMode !== "none" && interactive ? toAriaBoolean(this.selected) : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(disabled) : undefined, "aria-label": role && this.label, class: {
+                [CSS.container]: true,
+                [CSS.interactive]: interactive,
+                // [Deprecated] Use the content-top slot for rendering icon with alignment="center" instead
+                [CSS.largeVisualDeprecated]: isLargeVisual,
+                [CSS.row]: true,
+                [CSS.selected]: this.selected,
+            }, onClick: this.clickHandler, role: role, tabIndex: disableInteraction ? undefined : 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setContainerEl }, this.renderSelectionIcon(), h("div", { class: CSS.column }, h("slot", { name: SLOTS.contentTop }), icon && h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: "l" }), h("div", { class: { [CSS.contentContainer]: true, [CSS.row]: true } }, h("slot", { name: SLOTS.contentStart }), h("div", { class: CSS.textContent }, heading && h("div", { class: CSS.heading }, heading), description && h("div", { class: CSS.description }, description)), h("slot", { name: SLOTS.contentEnd })), h("slot", { name: SLOTS.contentBottom }))));
     }
     render() {
         const { disabled } = this;
-        return (h(InteractiveContainer, { disabled: disabled }, this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
+        return (h(InteractiveContainer, { key: '0498410835d5fc00d19eb6787aa89862ce784c46', disabled: disabled }, !!this.href ? (h("calcite-link", { disabled: disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
     }
     get el() { return this; }
-    static get style() { return tileCss; }
+    static get style() { return CalciteTileStyle0; }
 }, [1, "calcite-tile", {
         "active": [516],
+        "alignment": [513],
         "description": [513],
         "disabled": [516],
         "embed": [516],
-        "focused": [516],
         "heading": [513],
         "href": [513],
         "icon": [513],
         "iconFlipRtl": [516, "icon-flip-rtl"],
-        "scale": [513]
-    }]);
+        "interactive": [4],
+        "label": [1],
+        "layout": [513],
+        "scale": [513],
+        "selected": [516],
+        "selectionAppearance": [513, "selection-appearance"],
+        "selectionMode": [513, "selection-mode"],
+        "setFocus": [64]
+    }, [[0, "keydown", "keyDownHandler"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/calcite-tip-group.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const tipGroupCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}::slotted(calcite-tip){margin:0px;border-style:none;max-inline-size:var(--calcite-tip-max-width)}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTipGroupStyle0 = tipGroupCss;
 
 const TipGroup = /*@__PURE__*/ proxyCustomElement(class TipGroup extends HTMLElement {
     constructor() {
@@ -15,9 +16,9 @@ const TipGroup = /*@__PURE__*/ proxyCustomElement(class TipGroup extends HTMLEle
         this.groupTitle = undefined;
     }
     render() {
-        return h("slot", null);
+        return h("slot", { key: '1c37ce2b89bdd6c4e386dcaefbfd9aebcf91bd4c' });
     }
-    static get style() { return tipGroupCss; }
+    static get style() { return CalciteTipGroupStyle0; }
 }, [1, "calcite-tip-group", {
         "groupTitle": [1, "group-title"]
     }]);

package/dist/components/calcite-tip-manager.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * 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.4.0
+ * v2.8.2
  */
 const CSS = {
     header: "header",
@@ -37,7 +37,8 @@ const ICONS = {
     close: "x",
 };
 
-const tipManagerCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);--calcite-tip-manager-height:19vh}:host *{box-sizing:border-box}:host([closed]){display:none}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline-end:0px;padding-inline-start:1rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-1);line-height:1.5rem;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.container{position:relative;overflow:hidden;outline-color:transparent;min-block-size:150px}.container:focus{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          )}.tip-container{margin-block-start:1px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:1rem;outline-color:transparent;animation-name:none;animation-duration:var(--calcite-animation-timing);block-size:var(--calcite-tip-manager-height)}.tip-container:focus{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          )}::slotted(calcite-tip){margin:0px;border-style:none;max-inline-size:var(--calcite-tip-max-width)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding-inline:0px;padding-block:0.75rem 0.5rem}.page-position{margin-block:0px;margin-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tipManagerCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);--calcite-tip-manager-height:19vh}:host *{box-sizing:border-box}:host([closed]){display:none}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline-end:0px;padding-inline-start:1rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-1);line-height:1.5rem;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.container{position:relative;overflow:hidden;outline-color:transparent;min-block-size:150px}.container:focus{outline:2px solid var(--calcite-ui-focus-color, 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          )}.tip-container{margin-block-start:1px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:1rem;outline-color:transparent;animation-name:none;animation-duration:var(--calcite-animation-timing);block-size:var(--calcite-tip-manager-height)}.tip-container:focus{outline:2px solid var(--calcite-ui-focus-color, 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          )}::slotted(calcite-tip){margin:0px;border-style:none;max-inline-size:var(--calcite-tip-max-width)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding-inline:0px;padding-block:0.75rem 0.5rem}.page-position{margin-block:0px;margin-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTipManagerStyle0 = tipManagerCss;
 
 const TipManager = /*@__PURE__*/ proxyCustomElement(class TipManager extends HTMLElement {
     constructor() {
@@ -216,7 +217,7 @@ const TipManager = /*@__PURE__*/ proxyCustomElement(class TipManager extends HTM
         "selectedIndex": ["selectedChangeHandler"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return tipManagerCss; }
+    static get style() { return CalciteTipManagerStyle0; }
 }, [1, "calcite-tip-manager", {
         "closed": [1540],
         "headingLevel": [514, "heading-level"],

package/dist/components/calcite-tip.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * 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.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -34,7 +34,8 @@ const SLOTS = {
     thumbnail: "thumbnail",
 };
 
-const tipCss = ":host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0px;border-style:none;padding:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{margin-block-end:0.5rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info:only-child{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a:focus){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          )}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+const tipCss = ":host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0px;border-style:none;padding:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{margin-block-end:0.5rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info:only-child{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a:focus){outline:2px solid var(--calcite-ui-focus-color, 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          )}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTipStyle0 = tipCss;
 
 const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
     constructor() {
@@ -113,7 +114,7 @@ const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
         return (h("div", { class: CSS.content }, this.renderImageFrame(), this.renderInfoNode()));
     }
     render() {
-        return (h(Fragment, null, h("article", { class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
+        return (h(Fragment, { key: '0c1a204f565a12f4e359f1c6c050258bf70c2b18' }, h("article", { key: '1e2ea801101e4280b0b073e780ef1db6f064856b', class: CSS.container }, this.renderHeader(), this.renderContent()), this.renderDismissButton()));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -121,7 +122,7 @@ const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return tipCss; }
+    static get style() { return CalciteTipStyle0; }
 }, [1, "calcite-tip", {
         "closed": [1540],
         "closeDisabled": [516, "close-disabled"],

package/dist/components/card-manager2.js

@@ -26,6 +26,7 @@ import { d as defineCustomElement$2 } from './edit-card2.js';
 import { d as defineCustomElement$1 } from './info-card2.js';
 
 const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
+const CardManagerStyle0 = cardManagerCss;
 
 const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends HTMLElement {
     constructor() {
@@ -93,7 +94,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, { key: 'c4b71cefeb5eec1e1312104c519dfb9ef1398d71' }, h("div", { key: '6c1539db40060f9295c8aa72af29eac5f9c67d8d', class: "overflow-auto height-full" }, h("calcite-shell", { key: '2a4f7b47e01e3f27528dbce5fe236187a0f57dab', class: "position-relative " + featuresClass }, h("div", { key: '4b226239c5b80210aa3d42d422bbc50a66bdcf59' }, h("info-card", { key: '23ec16e93def6ebf81ed86109a55aa3e667fb958', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { key: '8b385e91e35cfa4dc14aa67f300badf627119c39', class: "position-relative " + messageClass }, h("div", { key: 'a4cca3a463dbe115638c3b15d4613f7d719f153f', class: "padding-1" }, h("calcite-notice", { key: '91047393ac4f19864179f97631ffcdf48aaa47c1', icon: "table", open: true }, h("div", { key: 'c81f06e628d2811c3cedbae6a3e38fb972d0a759', slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -111,7 +112,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         this._translations = messages[0];
     }
     get el() { return this; }
-    static get style() { return cardManagerCss; }
+    static get style() { return CardManagerStyle0; }
 }, [0, "card-manager", {
         "isMobile": [4, "is-mobile"],
         "layer": [16],

package/dist/components/checkbox.js

@@ -12,7 +12,8 @@ import { i as isActivationKey } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 
-const checkboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input);color:var(--calcite-color-background)}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);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([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{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          )}.toggle::after{content:\"\";inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute;transform:translateX(-50%) translateY(-50%)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const checkboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input);color:var(--calcite-color-background)}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{outline:2px solid var(--calcite-color-status-danger);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([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-focus-color, 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          )}.toggle::after{content:\"\";inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute;transform:translateX(-50%) translateY(-50%)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteCheckboxStyle0 = checkboxCss;
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
     constructor() {
@@ -70,6 +71,19 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         this.required = false;
         this.scale = "m";
         this.status = "idle";
+        this.validity = {
+            valid: false,
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+        };
         this.value = undefined;
     }
     //--------------------------------------------------------------------------
@@ -122,12 +136,12 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, role: "checkbox", tabIndex: this.disabled ? undefined : 0,
+        return (h(Host, { key: '6ef0c5b4fe62f003d9fe1ea6979cb5aeb564dac7', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '72f94ddb0795e2e0d10aac69af05c1ce7d6e5ead', disabled: this.disabled }, h("div", { key: '1cfc46f5a7180d6cd52962a26488c66eec14d852', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, role: "checkbox", tabIndex: this.disabled ? undefined : 0,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (toggleEl) => (this.toggleEl = toggleEl) }, h("svg", { "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this }))));
+            ref: (toggleEl) => (this.toggleEl = toggleEl) }, h("svg", { key: '4956ac9d598af8267781610220896e07aad56c65', "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, h("path", { key: 'bd650b149977569e00a99be2fbc8a836cbfd4cfe', d: this.getPath() })), h("slot", { key: '604e420b7fe7014a202991d0e5c992e57d540d16' })), h(HiddenFormInputSlot, { key: '9ec0eab7c20a9dffed6a1a9b517ece8b8ed1cb26', component: this }))));
     }
     get el() { return this; }
-    static get style() { return checkboxCss; }
+    static get style() { return CalciteCheckboxStyle0; }
 }, [1, "calcite-checkbox", {
         "checked": [1540],
         "disabled": [516],
@@ -140,6 +154,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "required": [516],
         "scale": [513],
         "status": [513],
+        "validity": [1040],
         "value": [8],
         "setFocus": [64]
     }]);