@arcgis/map-components 5.2.0-next.8 → 5.2.0-next.85

package/dist/components/arcgis-legend-classic-element/customElement.js

@@ -1,20 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as v } from "../../chunks/runtime.js";
-import { css as $, html as s } from "lit";
-import { LitElement as u, safeClassMap as n, nothing as c, safeStyleMap as w } from "@arcgis/lumina";
-import { classes as g } from "@arcgis/toolkit/dom";
-import { b as E, s as p, i as f, c as d, g as y } from "../../chunks/utils2.js";
-const L = $`:host{contain:content}.layer-table{display:table;width:100%}.layer-caption{display:table-caption;padding:var(--calcite-spacing-sm) 0;word-break:break-word}.layer-body{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.layer-row{display:table-row}.layer-cell{padding:var(--calcite-spacing-xxs) 0;vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.imagery-layer-info-stretched{padding:0 2px;vertical-align:top}.layer-cell-symbols{text-align:center}.symbol{display:flex;justify-content:center}`;
-class x extends u {
+import { c as w } from "../../chunks/runtime.js";
+import { css as f, html as s } from "lit";
+import { LitElement as u, safeClassMap as m, nothing as o, safeStyleMap as $ } from "@arcgis/lumina";
+import { classes as y } from "@arcgis/toolkit/dom";
+import { a as E, g as p } from "../../chunks/titleUtils.js";
+import { s as h, i as L, g as b } from "../../chunks/utils2.js";
+const x = f`:host{contain:content}.layer-body:has(>arcgis-legend-classic-element){display:flex;flex-direction:column;gap:calc(var(--arcgis-internal-legend-layer-gap) / 2)}.layer-body arcgis-legend-classic-element{margin-inline-start:var(--arcgis-internal-legend-layer-padding)}.layer-table{display:table;width:100%}.layer-caption{display:table-caption;word-break:break-word;font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-medium);padding-bottom:var(--calcite-space-2xs)}.layer-row{display:table-row}.layer-body:has(>.layer-row+.layer-row)>.layer-row .layer-cell{padding-block:var(--calcite-space-2xs)}.layer-cell{vertical-align:middle;word-break:break-word;display:table-cell}.layer-cell-info{padding-inline-start:var(--calcite-space-xs);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.layer-cell-inline-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size)}.imagery-layer-stretched-image{display:block;margin-bottom:-2px}.imagery-layer-info-stretched{padding:0 2px;vertical-align:top}.layer-cell-symbols{text-align:center}.symbol{display:flex;justify-content:center}`;
+class z extends u {
   static {
-    this.properties = { cssEffectFilter: 1, layer: 0, legendElement: 0, messages: 0 };
+    this.properties = { cssEffectFilter: 1, layer: 0, inlineLayerTitle: 1, legendElement: 0, messages: 0 };
   }
   static {
-    this.styles = L;
+    this.styles = x;
   }
   render() {
-    const e = this._renderLegendElement(), a = E(this.legendElement, this.messages), i = a ? s`<div class="layer-caption">${a}</div>` : null;
-    return s`<section class="layer-table">${i}${e}</section>`;
+    const e = this._renderLegendElement(), i = E(this.legendElement, this.messages), a = i ? s`<div class="layer-caption">${i}</div>` : null;
+    return s`<section class="layer-table">${a}${e}</section>`;
   }
   _renderLegendElement() {
     switch (this.legendElement.type) {
@@ -31,7 +32,7 @@ class x extends u {
         return s`<arcgis-legend-relationship-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .opacity=${this.layer.opacity} .messages=${this.messages}></arcgis-legend-relationship-ramp>`;
       case "pie-chart-ramp": {
         const { preview: e } = this.legendElement;
-        return p(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
+        return h(e, this.messages.previewPieChartAriaLabel), s`<div>${e}</div>`;
       }
       case "univariate-above-and-below-ramp":
         return s`<arcgis-legend-classic-univariate-above-and-below-ramp .cssEffectFilter=${this.cssEffectFilter} .legendElement=${this.legendElement} .messages=${this.messages} .opacity=${this.layer.opacity}></arcgis-legend-classic-univariate-above-and-below-ramp>`;
@@ -42,41 +43,44 @@ class x extends u {
     }
   }
   _renderSymbolTable(e) {
-    const a = e.infos.map((i) => this._renderElementInfo(i, e.legendType)).filter(Boolean);
+    const i = this.inlineLayerTitle && e.infos.length === 1 ? this.inlineLayerTitle : void 0, a = e.infos.map((l) => this._renderElementInfo(l, e.legendType, i)).filter(Boolean);
     return a.length ? s`<div class="layer-body">${a}</div>` : null;
   }
-  _renderElementInfo(e, a) {
-    const { layer: i } = this, l = "label" in e ? e.label : null;
+  _renderElementInfo(e, i, a) {
+    const { layer: l } = this, t = "label" in e ? e.label : null;
     if ("type" in e && e.type)
-      return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${i} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
+      return e ? s`<arcgis-legend-classic-element .cssEffectFilter=${this.cssEffectFilter} .layer=${l} .legendElement=${e} .messages=${this.messages}></arcgis-legend-classic-element>` : null;
     if (!("preview" in e && e.preview) && !("src" in e && e.src))
       return null;
-    const r = f(i, a), t = {
+    const r = L(l, i), d = {
       "imagery-layer-info-stretched": r
-    };
-    return s`<div class="layer-row"><div class=${n(g("layer-cell", "layer-cell-symbols", {
+    }, g = {
       "imagery-layer-info-stretched": r
-    }))}>${this._renderPreview(e, r)}</div><div class=${n(g("layer-cell", "layer-cell-info", t))}>${d(this.messages, l, !1) || ""}</div></div>`;
+    }, n = p(this.messages, t, !1) || "", c = !n && a ? a : "", v = {
+      "layer-cell-inline-title": !!c,
+      ...d
+    };
+    return s`<div class="layer-row"><div class=${m(y("layer-cell", "layer-cell-symbols", g))}>${this._renderPreview(e, r)}</div><div class=${m(y("layer-cell", "layer-cell-info", v))}>${n || c}</div></div>`;
   }
-  _renderPreview(e, a) {
-    const { layer: i } = this;
+  _renderPreview(e, i) {
+    const { layer: a } = this;
     if ("preview" in e && e.preview) {
-      const { preview: l } = e, r = "previewAriaLabel" in e ? e.previewAriaLabel : null, t = "label" in e ? d(this.messages, e.label, !1) : null;
-      return p(l, y(this.messages, r || t)), s`<div class="symbol">${l}</div>`;
+      const { preview: l } = e, t = "previewAriaLabel" in e ? e.previewAriaLabel : null, r = "label" in e ? p(this.messages, e.label, !1) : null;
+      return h(l, b(this.messages, t || r)), s`<div class="symbol">${l}</div>`;
     }
-    return "src" in e && e.src ? this._renderImage(e, i, a) : null;
+    return "src" in e && e.src ? this._renderImage(e, a, i) : null;
   }
-  _renderImage(e, a, i) {
-    const { previewAriaLabel: l, src: r, opacity: t } = e, o = d(this.messages, e.label, !1), h = {
-      "imagery-layer-stretched-image": i,
-      symbol: !i
-    }, b = {
-      opacity: `${t ?? a.opacity}`
-    }, m = y(this.messages, l || o);
-    return s`<img alt=${m ?? c} .ariaLabel=${m} class=${n(g(h))} height=${e.height ?? void 0 ?? c} src=${r ?? c} style=${w(b)} width=${e.width ?? void 0 ?? c}>`;
+  _renderImage(e, i, a) {
+    const { previewAriaLabel: l, src: t, opacity: r } = e, d = p(this.messages, e.label, !1), g = {
+      "imagery-layer-stretched-image": a,
+      symbol: !a
+    }, n = {
+      opacity: `${r ?? i.opacity}`
+    }, c = b(this.messages, l || d);
+    return s`<img alt=${c ?? o} .ariaLabel=${c} class=${m(y(g))} height=${e.height ?? void 0 ?? o} src=${t ?? o} style=${$(n)} width=${e.width ?? void 0 ?? o}>`;
   }
 }
-v("arcgis-legend-classic-element", x);
+w("arcgis-legend-classic-element", z);
 export {
-  x as ArcgisLegendClassicElement
+  z as ArcgisLegendClassicElement
 };

package/dist/components/arcgis-legend-classic-size-ramp/customElement.js

@@ -3,8 +3,9 @@ import { c as t } from "../../chunks/runtime.js";
 import { css as n, html as i } from "lit";
 import { LitElement as m, safeClassMap as r } from "@arcgis/lumina";
 import { classes as l } from "@arcgis/toolkit/dom";
-import { c, s as o, g as p } from "../../chunks/utils2.js";
-const d = n`.size-ramp-container{margin-left:var(--calcite-spacing-sm);display:table}:dir(rtl) .size-ramp-container{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.size-ramp-row{display:table-row}.size-ramp-cell{padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word;display:table-cell}.size-ramp-label{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.size-ramp-symbol-container{min-width:10px;text-align:center}.size-ramp-symbol{display:flex;justify-content:center}`;
+import { g as o } from "../../chunks/titleUtils.js";
+import { s as c, g as p } from "../../chunks/utils2.js";
+const d = n`.size-ramp-container{display:table}.size-ramp-row{display:table-row}.size-ramp-row:not(:last-child) .size-ramp-cell,.size-ramp-row:not(:last-child) .size-ramp-label{padding-bottom:var(--calcite-space-xs)}.size-ramp-cell{min-width:100px;vertical-align:middle;word-break:break-word;display:table-cell}.size-ramp-label{padding-inline-start:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.size-ramp-symbol-container{min-width:10px;text-align:center}.size-ramp-symbol{display:flex;justify-content:center}`;
 class g extends m {
   constructor() {
     super(...arguments), this.legendElement = null;
@@ -23,8 +24,8 @@ class g extends m {
     const { preview: s } = e;
     if (!s)
       return null;
-    const a = c(this.messages, e.label, !1);
-    return o(s, p(this.messages, a)), i`<div class="size-ramp-row"><div class=${r(l("size-ramp-cell", "size-ramp-symbol-container"))}><div class="size-ramp-symbol">${s}</div></div><div class=${r(l("size-ramp-cell", "size-ramp-label"))}>${a}</div></div>`;
+    const a = o(this.messages, e.label, !1);
+    return c(s, p(this.messages, a)), i`<div class="size-ramp-row"><div class=${r(l("size-ramp-cell", "size-ramp-symbol-container"))}><div class="size-ramp-symbol">${s}</div></div><div class=${r(l("size-ramp-cell", "size-ramp-label"))}>${a}</div></div>`;
   }
 }
 t("arcgis-legend-classic-size-ramp", g);

package/dist/components/arcgis-legend-classic-univariate-above-and-below-ramp/customElement.js

@@ -2,8 +2,8 @@
 import { c as k } from "../../chunks/runtime.js";
 import { css as B, html as l } from "lit";
 import { LitElement as F, safeClassMap as b, safeStyleMap as e } from "@arcgis/lumina";
-import { g as P, b as g, c as f, d as U, u as j, f as h, h as o } from "../../chunks/univariateUtils.js";
-const H = B`.layer-body{margin-left:var(--calcite-spacing-sm);display:table}:dir(rtl) .layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.layer-row{display:table-row}.layer-cell{display:table-cell;padding:var(--calcite-spacing-xxs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-spacing-sm);padding-left:var(--calcite-spacing-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-spacing-md)}:dir(rtl) .ramps{margin-right:var(--calcite-spacing-md);margin-left:auto}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}.univariate-above-below-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-above-below-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-above-below-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-above-below-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-above-below-label{margin-right:var(--calcite-spacing-sm);margin-left:auto}:dir(rtl) .univariate-above-below-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
+import { g as P, b as f, c as h, d as U, u as j, f as g, h as o } from "../../chunks/univariateUtils.js";
+const H = B`.layer-body{display:table}.layer-row{display:table-row}.layer-cell{display:table-cell;padding:var(--calcite-space-2xs) 0;min-width:100px;vertical-align:middle;word-break:break-word}.layer-cell-info{padding-right:var(--calcite-space-sm);padding-left:var(--calcite-space-sm);max-width:250px;word-break:normal;word-wrap:normal;font-size:var(--calcite-font-size-sm)}.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-space-md)}:dir(rtl) .ramps{margin-right:var(--calcite-space-md);margin-left:auto}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}.univariate-above-below-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-above-below-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-above-below-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-above-below-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-above-below-label{margin-right:var(--calcite-space-sm);margin-left:auto}:dir(rtl) .univariate-above-below-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
 class I extends F {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
@@ -18,7 +18,7 @@ class I extends F {
     const { legendElement: y, opacity: n } = this, { sizeRampElement: i, colorRampElement: c } = P(y, this.messages, n);
     if (!i)
       return null;
-    const p = this.messages.previewColorRampAriaLabel, d = g(i, "above", !0), m = g(i, "below", !0), v = 12, r = f(c, {
+    const p = this.messages.previewColorRampAriaLabel, d = f(i, "above", !0), m = f(i, "below", !0), v = 12, s = h(c, {
       width: v,
       height: d,
       rampAlignment: "vertical",
@@ -26,7 +26,7 @@ class I extends F {
       type: "above",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: p
-    }), w = f(c, {
+    }), w = h(c, {
       width: v,
       height: m,
       rampAlignment: "vertical",
@@ -34,8 +34,8 @@ class I extends F {
       type: "below",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: p
-    }), u = U(i), s = i.infos.map((a) => a.label), x = s.map((a, t) => t === 0 ? l`<div class=${b(a ? r ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : t === 2 ? l`<div></div>` : null), $ = s.length - 1, R = Math.floor(s.length / 2), L = s.map((a, t) => t === R || t === $ ? l`<div class=${b(a ? r ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : null), E = { display: "table-cell", verticalAlign: "middle" }, z = { marginTop: `${u}px` }, A = { height: `${d}px` }, S = { height: `${m}px` };
-    return l`<div style=${e(j)}><div class="layer-body">${i.infos.map((a, t) => l`<div class="layer-row"><div class="symbol" style=${e(E)}>${a.preview}</div>${!r && t % 2 === 0 ? l`<div class="layer-cell layer-cell-info">${s[t]}</div>` : null}</div>`)}</div>${r ? l`<div style=${e(z)}><div style=${e(h)}><div style=${e(o)}><div class="ramps">${r}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(A)}>${x}</div></div></div><div style=${e(h)}><div style=${e(o)}><div class="ramps">${w}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(S)}>${L}</div></div></div></div>` : null}</div>`;
+    }), u = U(i), r = i.infos.map((a) => a.label), $ = r.map((a, t) => t === 0 ? l`<div class=${b(a ? s ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : t === 2 ? l`<div></div>` : null), x = r.length - 1, R = Math.floor(r.length / 2), L = r.map((a, t) => t === R || t === x ? l`<div class=${b(a ? s ? "univariate-above-below-label" : "ramp-label" : void 0)}>${a}</div>` : null), E = { display: "table-cell", verticalAlign: "middle" }, z = { marginTop: `${u}px` }, A = { height: `${d}px` }, S = { height: `${m}px` };
+    return l`<div style=${e(j)}><div class="layer-body">${i.infos.map((a, t) => l`<div class="layer-row"><div class="symbol" style=${e(E)}>${a.preview}</div>${!s && t % 2 === 0 ? l`<div class="layer-cell layer-cell-info">${r[t]}</div>` : null}</div>`)}</div>${s ? l`<div style=${e(z)}><div style=${e(g)}><div style=${e(o)}><div class="ramps">${s}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(A)}>${$}</div></div></div><div style=${e(g)}><div style=${e(o)}><div class="ramps">${w}</div></div><div style=${e(o)}><div class="ramp-labels" style=${e(S)}>${L}</div></div></div></div>` : null}</div>`;
   }
 }
 k("arcgis-legend-classic-univariate-above-and-below-ramp", I);

package/dist/components/arcgis-legend-classic-univariate-color-size-ramp/customElement.js

@@ -4,7 +4,7 @@ import { css as w, html as i } from "lit";
 import { LitElement as x, safeClassMap as o, safeStyleMap as e } from "@arcgis/lumina";
 import { classes as R } from "@arcgis/toolkit/dom";
 import { e as z, d as $, b as C, c as E, u as S, f as L, h as n } from "../../chunks/univariateUtils.js";
-const U = w`.layer-body{margin-left:var(--calcite-spacing-sm)}:dir(rtl) .layer-body{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}.layer-row,.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-spacing-md)}:dir(rtl) .ramps{margin-right:var(--calcite-spacing-md);margin-left:auto}.size-ramp~.layer-cell-info{width:80%;max-width:80%}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}.univariate-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-label{margin-right:var(--calcite-spacing-sm);margin-left:auto}:dir(rtl) .univariate-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
+const U = w`.layer-row,.symbol{display:flex;justify-content:center}.ramps{margin-left:var(--calcite-space-md)}:dir(rtl) .ramps{margin-right:var(--calcite-space-md);margin-left:auto}.size-ramp~.layer-cell-info{width:80%;max-width:80%}.ramp-labels{display:flex;flex-flow:column nowrap;justify-content:space-between}.ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}.ramp-label:first-child{margin-top:calc(var(--calcite-font-size-sm) / 3 * -1)}.ramp-label:last-child{bottom:calc(var(--calcite-font-size-sm) * .25 * -1)}:dir(rtl) .ramp-label:before{right:auto;left:100%;border-width:3px 0 3px 4px;border-color:transparent transparent transparent var(--calcite-color-text-1)}.univariate-label{position:relative;margin-left:7px;line-height:1em;white-space:nowrap;font-size:var(--calcite-font-size-sm)}.univariate-label:before{display:block;position:absolute;top:.45em;left:-19px;border-width:1px 0 0;border-style:solid;width:14px;height:0;content:""}.univariate-label:first-child{top:calc(var(--calcite-font-size-sm) / 2.2 * -1)}.univariate-label:last-child{bottom:calc(var(--calcite-font-size-sm) / 2.2 * -1)}:dir(rtl) .univariate-label{margin-right:var(--calcite-space-sm);margin-left:auto}:dir(rtl) .univariate-label:before{right:-19px;left:auto}.univariate-above-below-symbol{display:flex;align-items:center;justify-content:center}`;
 class A extends x {
   constructor() {
     super(...arguments), this.legendElement = null, this.opacity = 1;
@@ -27,8 +27,8 @@ class A extends x {
       type: "full",
       cssEffectFilter: this.cssEffectFilter,
       ariaLabel: this.messages.previewColorRampAriaLabel
-    }), f = a.infos.length - 1, g = a.infos.map((t, s) => s === 0 || s === f ? i`<div class=${o(t.label ? l ? "univariate-label" : "ramp-label" : void 0)}>${t.label}</div>` : null), b = { display: "table-cell", verticalAlign: "middle" }, h = { marginTop: `${m}px` }, y = { height: `${r}px` };
-    return i`<div style=${e(S)}><div class="layer-body">${a.infos.map((t) => i`<div class=${o(R("layer-row", "size-ramp"))}><div class="symbol" style=${e(b)}>${t.preview}</div></div>`)}</div><div style=${e(h)}><div style=${e(L)}><div style=${e(n)}><div class="ramps">${v}</div></div><div style=${e(n)}><div class="ramp-labels" style=${e(y)}>${g}</div></div></div></div></div>`;
+    }), f = a.infos.length - 1, b = a.infos.map((t, s) => s === 0 || s === f ? i`<div class=${o(t.label ? l ? "univariate-label" : "ramp-label" : void 0)}>${t.label}</div>` : null), h = { display: "table-cell", verticalAlign: "middle" }, g = { marginTop: `${m}px` }, y = { height: `${r}px` };
+    return i`<div style=${e(S)}><div class="layer-body">${a.infos.map((t) => i`<div class=${o(R("layer-row", "size-ramp"))}><div class="symbol" style=${e(h)}>${t.preview}</div></div>`)}</div><div style=${e(g)}><div style=${e(L)}><div style=${e(n)}><div class="ramps">${v}</div></div><div style=${e(n)}><div class="ramp-labels" style=${e(y)}>${b}</div></div></div></div></div>`;
   }
 }
 u("arcgis-legend-classic-univariate-color-size-ramp", A);

package/dist/components/arcgis-legend-classic-view/customElement.js

@@ -1,11 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as c, html as a } from "lit";
-import { LitElement as d, safeClassMap as o } from "@arcgis/lumina";
+import { c as m } from "../../chunks/runtime.js";
+import { css as y, html as a } from "lit";
+import { LitElement as p, safeClassMap as d } from "@arcgis/lumina";
 import { classes as g } from "@arcgis/toolkit/dom";
-import { H as m } from "../../chunks/heading.js";
-const h = c`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:block}.layers{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layers>.layer{position:relative}.layers>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layers>.layer:last-child{padding-bottom:var(--arcgis-internal-legend-layer-gap)}.layer>.esri-widget__heading{margin:var(--arcgis-internal-legend-heading-margin)}.no-legend{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md)}.layer{padding:var(--arcgis-internal-legend-layer-padding);word-wrap:break-word}.layer-elements{margin-left:var(--calcite-spacing-sm);display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-element-gap);overflow:auto}.layer-children{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layer-children>.layer{position:relative}.layer-children>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer-child{margin-left:var(--calcite-spacing-sm);padding:0}:dir(rtl) .layer-elements,:dir(rtl) .layer-child{margin-right:var(--calcite-spacing-sm);margin-left:0;overflow:auto}`;
-class y extends d {
+import { H as f } from "../../chunks/heading.js";
+import { g as v } from "../../chunks/titleUtils.js";
+const u = y`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:block;padding:var(--arcgis-internal-padding)}.layers{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layers>.layer{position:relative}.layers>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer>.esri-widget__heading{margin:var(--arcgis-internal-legend-heading-margin);font-size:var(--calcite-font-size-md);font-weight:var(--calcite-font-weight-semibold)}.layer{word-wrap:break-word}.layer-elements{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-element-gap);overflow:auto}.layer-children{display:flex;flex-direction:column;gap:var(--arcgis-internal-legend-layer-gap)}.layer-children>.layer{margin-inline-start:var(--arcgis-internal-legend-layer-padding);position:relative}.layer-children>.layer:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--arcgis-internal-legend-layer-gap) / -2);border-bottom:1px solid var(--calcite-color-border-2)}.layer-children.layer-children-compact>.layer.layer-child-inline-title{margin-inline-start:0}.layer-children.layer-children-compact>.layer:not(:last-child):after{content:none}.layer-children.layer-children-compact{gap:var(--calcite-space-2xs)}.layer-child{padding:0}.layer-child-title{font-weight:var(--calcite-font-weight-medium)}`;
+function w(r) {
+  return "type" in r && !!r.type;
+}
+function h(r, e) {
+  const t = r.legendElements?.filter(Boolean);
+  if (!r.parent || !r.title || t?.length !== 1)
+    return;
+  const [i] = t;
+  if (i.type !== "symbol-table" || i.infos.length !== 1)
+    return;
+  const [l] = i.infos;
+  if (!l || w(l))
+    return;
+  const n = "preview" in l && !!l.preview || "src" in l && !!l.src, s = "label" in l ? v(e, l.label, !1) : "";
+  return n && !s ? r.title ?? void 0 : void 0;
+}
+class _ extends p {
   constructor() {
     super(...arguments), this.headingLevel = 3, this.type = "classic";
   }
@@ -13,34 +30,40 @@ class y extends d {
     this.properties = { activeLayerInfos: 0, headingLevel: 9, type: 32, messages: 0 };
   }
   static {
-    this.styles = h;
+    this.styles = u;
   }
   render() {
-    const r = this.activeLayerInfos?.toArray().map((l) => this._renderLegendForLayer(l)).filter(Boolean);
-    return r?.length ? a`<section class="layers">${r}</section>` : a`<div class="no-legend">${this.messages.noLegend}</div>`;
+    const t = this.activeLayerInfos?.toArray().map((i) => this._renderLegendForLayer(i)).filter(Boolean);
+    return t?.length ? a`<section class="layers">${t}</section>` : a`<div class="no-legend">${this.messages.noLegend}</div>`;
   }
   _renderLegendForLayer(e) {
     if (!e.ready)
       return null;
-    const r = e.title ? m({
+    const t = h(e, this.messages), i = e.title && !t ? f({
       level: this.headingLevel,
+      class: e.parent ? "layer-child-title" : void 0,
       children: e.title
     }) : null;
     if (e.children.length) {
-      const l = e.children.toArray().map((i) => this._renderLegendForLayer(i));
-      return a`<section class="layer">${r}<div class="layer-children">${l}</div></section>`;
+      const l = e.children.toArray(), n = l.length > 0 && l.every((o) => !!h(o, this.messages)), s = l.map((o) => this._renderLegendForLayer(o)), c = g("layer-children", {
+        "layer-children-compact": n
+      });
+      return a`<section class="layer">${i}<div class=${d(c)}>${s}</div></section>`;
     }
-    return this._renderLegendElementsForLayer(e, r);
+    return this._renderLegendElementsForLayer(e, i, t);
   }
-  _renderLegendElementsForLayer(e, r) {
+  _renderLegendElementsForLayer(e, t, i) {
     const l = e.legendElements?.filter(Boolean);
     if (!l?.length)
       return null;
-    const i = l.map((s) => a`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .layer=${e.layer} .legendElement=${s} .messages=${this.messages}></arcgis-legend-classic-element>`), t = { "layer-child": !!e.parent };
-    return a`<section class=${o(g("layer", t))}>${r}<div class="layer-elements">${i}</div></section>`;
+    const n = l.map((c) => a`<arcgis-legend-classic-element .cssEffectFilter=${e.cssEffectFilter ?? void 0} .inlineLayerTitle=${i} .layer=${e.layer} .legendElement=${c} .messages=${this.messages}></arcgis-legend-classic-element>`), s = {
+      "layer-child": !!e.parent,
+      "layer-child-inline-title": !!i
+    };
+    return a`<section class=${d(g("layer", s))}>${t}<div class="layer-elements">${n}</div></section>`;
   }
 }
-n("arcgis-legend-classic-view", y);
+m("arcgis-legend-classic-view", _);
 export {
-  y as LegendClassicView
+  _ as LegendClassicView
 };

package/dist/components/arcgis-legend-relationship-ramp/customElement.js

@@ -2,11 +2,11 @@
 import { c as F } from "../../chunks/runtime.js";
 import { css as P, html as b, svg as X } from "lit";
 import { getBoundingBox as j, computeBBox as I, getTransformMatrix as A } from "@arcgis/core/applications/Components/svgUtils.js";
-import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as r } from "@arcgis/lumina";
+import { LitElement as U, safeStyleMap as h, safeClassMap as c, nothing as l } from "@arcgis/lumina";
 import { useDirection as N } from "@arcgis/lumina/controllers";
 import { classes as p } from "@arcgis/toolkit/dom";
 import { g as T, a as G, b as J, c as K } from "../../chunks/svgUtils.js";
-const O = P`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-right:5px;max-width:85px;text-align:right}.diamond-right-column{align-self:center;padding-left:5px;max-width:85px;text-align:left}.diamond-middle-column{display:flex;flex-direction:column;text-align:center}.diamond-middle-column-label{align-self:center;max-width:85px}.diamond-middle-column-ramp{width:85px;height:85px}.square-table{display:table;font-size:var(--calcite-font-size-sm)}.square-table-row{display:table-row}.square-table-cell{display:table-cell}.square-table-label{max-width:95px}.square-table-label-left-bottom{vertical-align:bottom;text-align:left}.square-table-label-right-bottom{vertical-align:bottom;text-align:right}.square-table-label-left-top{vertical-align:top;text-align:left}.square-table-label-right-top{vertical-align:top;text-align:right}`, Q = "http://www.w3.org/2000/svg";
+const O = P`.diamond-container{display:flex;font-size:var(--calcite-font-size-sm)}.diamond-left-column{align-self:center;padding-inline-end:5px;max-width:85px;text-align:right}.diamond-right-column{align-self:center;padding-inline-start:5px;max-width:85px;text-align:left}.diamond-middle-column{display:flex;flex-direction:column;text-align:center}.diamond-middle-column-label{align-self:center;max-width:85px}.diamond-middle-column-ramp{width:85px;height:85px}.square-table{display:table;font-size:var(--calcite-font-size-sm)}.square-table-row{display:table-row}.square-table-cell{display:table-cell}.square-table-label{max-width:95px}.square-table-label-left-bottom{vertical-align:bottom;text-align:left}.square-table-label-right-bottom{vertical-align:bottom;text-align:right}.square-table-label-left-top{vertical-align:top;text-align:left}.square-table-label-right-top{vertical-align:top;text-align:right}`, Q = "http://www.w3.org/2000/svg";
 class V extends U {
   constructor() {
     super(...arguments), this._direction = N(), this.legendElement = null;
@@ -17,12 +17,12 @@ class V extends U {
   static {
     this.styles = O;
   }
-  _getLineMarkers(n, l) {
+  _getLineMarkers(n, r) {
     const e = "arrowStart", s = "arrowEnd", i = n === "left", t = {
       markerStart: null,
       markerEnd: null
     };
-    switch (l) {
+    switch (r) {
       case "HL":
         i ? t.markerStart = `url(#${s})` : t.markerEnd = `url(#${e})`;
         break;
@@ -39,34 +39,34 @@ class V extends U {
     return t;
   }
   render() {
-    const n = this.legendElement, { focus: l, labels: e } = n, s = !!l, i = this._renderRamp(n), t = { justifyContent: "center" }, a = this._direction === "rtl";
+    const n = this.legendElement, { focus: r, labels: e } = n, s = !!r, i = this._renderRamp(n), t = { justifyContent: "center" }, a = this._direction === "rtl";
     return s ? b`<div class="diamond-container" style=${h(t)}><div class="diamond-left-column">${a ? e.right : e.left}</div><div class="diamond-middle-column"><div class="diamond-middle-column-label">${e.top}</div>${i}<div class="diamond-middle-column-label">${e.bottom}</div></div><div class="diamond-right-column">${a ? e.left : e.right}</div></div>` : b`<div class="square-table"><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-bottom"))}>${a ? e.top : e.left}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-bottom"))}>${a ? e.left : e.top}</div></div><div class="square-table-row"><div class="square-table-cell"></div>${i}<div class="square-table-cell"></div></div><div class="square-table-row"><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-right-top"))}>${a ? e.right : e.bottom}</div><div class="square-table-cell"></div><div class=${c(p("square-table-cell", "square-table-label", "square-table-label-left-top"))}>${a ? e.bottom : e.right}</div></div></div>`;
   }
   _renderRamp(n) {
-    const { focus: l, numClasses: e, colors: s, rotation: i } = n, t = this.opacity, a = this.messages.previewRelationshipRampAriaLabel, o = 60, m = !!l, d = Math.sqrt(o ** 2 + o ** 2) + (m ? 0 : 5), v = [], $ = [], k = [], u = o / e;
+    const { focus: r, numClasses: e, colors: s, rotation: i } = n, t = this.opacity, a = this.messages.previewRelationshipRampAriaLabel, o = 60, m = !!r, d = Math.sqrt(o ** 2 + o ** 2) + (m ? 0 : 5), v = [], $ = [], k = [], u = o / e;
     for (let f = 0; f < e; f++) {
       const H = f * u;
       for (let g = 0; g < e; g++) {
-        const W = g * u, M = T(s[f][g]), Y = K(null), z = {
+        const W = g * u, M = T(s[f][g]), Y = G(null), z = {
           type: "rect",
           x: W,
           y: H,
           width: u,
           height: u
-        }, R = G(M);
+        }, R = J(M);
         R && v.push(R);
-        const _ = J(z, M.fill, Y, null);
+        const _ = K(z, M.fill, Y, null);
         _ && $.push(_), k.push(j(z));
       }
     }
     const x = 15, q = 15, w = 10;
     let y;
     m || (y = "margin: -15px -15px -18px -15px");
-    const S = this._getLineMarkers("left", l), E = this._getLineMarkers("right", l), L = I(k), D = A(L, d, d, 0, !1, i, !1), B = A(L, d, d, 0, !1, m ? -45 : null, !1), C = {
+    const S = this._getLineMarkers("left", r), E = this._getLineMarkers("right", r), L = I(k), D = A(L, d, d, 0, !1, i, !1), B = A(L, d, d, 0, !1, m ? -45 : null, !1), C = {
       filter: this.cssEffectFilter,
       opacity: t == null ? "" : `${t}`
     };
-    return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ?? r} role=img style=${h(y)} width=${d ?? r} xmlns=${Q}>${X`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${v}</defs><g transform=${D ?? r}>${$}</g><g transform=${B ?? r}><line fill=none marker-end=${S.markerEnd ?? void 0 ?? r} marker-start=${S.markerStart ?? void 0 ?? r} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o - x} y2=${x} /><line fill=none marker-end=${E.markerEnd ?? void 0 ?? r} marker-start=${E.markerStart ?? void 0 ?? r} stroke=#555555 stroke-width=1 x1=${q} x2=${o - q} y1=${o + w} y2=${o + w} /></g>`}</svg></div>`;
+    return b`<div class=${c(m ? "diamond-middle-column-ramp" : "square-table-cell")} style=${h(C)}><svg .ariaLabel=${a} height=${d ?? l} role=img style=${h(y)} width=${d ?? l} xmlns=${Q}>${X`<defs><marker .id=${"arrowStart"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=5 refY=5><polyline fill=none points="0,0 5,5 0,10" stroke=#555555 stroke-width=1 /></marker><marker .id=${"arrowEnd"} markerHeight=10 markerUnits=strokeWidth markerWidth=10 orient=auto refX=0 refY=5><polyline fill=none points="5,0 0,5 5,10" stroke=#555555 stroke-width=1 /></marker>${v}</defs><g transform=${D ?? l}>${$}</g><g transform=${B ?? l}><line fill=none marker-end=${S.markerEnd ?? void 0 ?? l} marker-start=${S.markerStart ?? void 0 ?? l} stroke=#555555 stroke-width=1 x1=${-10} x2=${-10} y1=${o - x} y2=${x} /><line fill=none marker-end=${E.markerEnd ?? void 0 ?? l} marker-start=${E.markerStart ?? void 0 ?? l} stroke=#555555 stroke-width=1 x1=${q} x2=${o - q} y1=${o + w} y2=${o + w} /></g>`}</svg></div>`;
   }
 }
 F("arcgis-legend-relationship-ramp", V);

package/dist/components/arcgis-legend-spike-ramp/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as W } from "../../chunks/runtime.js";
-import { css as X, html as g } from "lit";
+import { css as X, html as v } from "lit";
 import { LitElement as Y, safeStyleMap as b } from "@arcgis/lumina";
 import { s as A, g as z, p as k } from "../../chunks/utils2.js";
-const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-spacing-sm-plus);margin-left:var(--calcite-spacing-sm)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-spacing-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:0 var(--calcite-spacing-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-spacing-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
+const C = X`.spike-ramp-container{display:flex;flex-direction:row;gap:var(--calcite-space-sm-plus)}.spike-ramp-preview-container{display:flex;position:relative;gap:var(--calcite-space-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding-inline-end:var(--calcite-space-xl)}.spike-ramp-preview{display:flex;gap:var(--calcite-space-sm-plus);align-items:end}.spike-ramp-symbol-preview{display:flex}.spike-ramp-lines{display:flex;position:absolute;bottom:0}.spike-ramp-labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.spike-ramp-label{position:relative;padding:0 var(--calcite-space-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.spike-ramp-label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, I = "#ddd", e = window.devicePixelRatio;
 function u(m) {
-  return m.infos.filter((r, l) => l % 2 === 0);
+  return m.infos.filter((r, o) => o % 2 === 0);
 }
 function w(m) {
   return !!(m && typeof m == "object");
@@ -21,35 +21,35 @@ class j extends Y {
     this.styles = C;
   }
   render() {
-    return this.legendElement.infos.length !== 5 ? null : g`<div class="spike-ramp-container"><div class="spike-ramp-preview-container">${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
+    return this.legendElement.infos.length !== 5 ? null : v`<div class="spike-ramp-container"><div class="spike-ramp-preview-container">${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
   }
   _renderSpikeRampPreview() {
-    const r = this.legendElement, [l, o, d] = u(r).map(({ preview: p, label: a }) => {
+    const r = this.legendElement, [o, l, d] = u(r).map(({ preview: p, label: a }) => {
       if (!p)
         return null;
       const i = p.cloneNode(!0);
       return i.classList.add("spike-ramp-symbol-preview"), A(i, z(this.messages, a)), i;
     });
-    return !l || !o || !d ? null : g`<div class="spike-ramp-preview"><div>${d}</div><div>${o}</div><div>${l}</div></div>`;
+    return !o || !l || !d ? null : v`<div class="spike-ramp-preview"><div>${d}</div><div>${l}</div><div>${o}</div></div>`;
   }
   _renderSpikeRampLines() {
-    const r = this.legendElement, [{ width: l, height: o }, { width: d }, { width: p, height: a }] = u(r).map(({ size: v }) => w(v) ? { width: k(v.width), height: k(v.height) } : { width: 0, height: 0 }), i = 10, c = 8, n = l + d + p + i * 3, h = o, s = document.createElement("canvas");
+    const r = this.legendElement, [{ width: o, height: l }, { width: d }, { width: p, height: a }] = u(r).map(({ size: g }) => w(g) ? { width: k(g.width), height: k(g.height) } : { width: 0, height: 0 }), i = 10, c = 8, n = o + d + p + i * 3, h = l, s = document.createElement("canvas");
     s.width = (n + i) * e, s.height = h * e, s.style.width = `${s.width / e}px`, s.style.height = `${s.height / e}px`;
     const t = s.getContext("2d");
     t.beginPath();
-    const f = n - (l / 2 + i), x = 0, y = n + c, $ = 0;
+    const f = n - (o / 2 + i), x = 0, y = n + c, $ = 0;
     t.moveTo(f * e, x * e), t.lineTo(y * e, $ * e);
-    const R = (n - c) / 2, E = (o - a) / 2, S = n + c, L = (o - a) / 2;
+    const R = (n - c) / 2, E = (l - a) / 2, S = n + c, L = (l - a) / 2;
     t.moveTo(R * e, E * e), t.lineTo(S * e, L * e);
     const P = p / 2, _ = h - a, H = n + c, T = h - a;
-    return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(), g`<div class="spike-ramp-lines">${s}</div>`;
+    return t.moveTo(P * e, _ * e), t.lineTo(H * e, T * e), t.strokeStyle = I, t.lineWidth = 0.5 * e, t.stroke(), v`<div class="spike-ramp-lines">${s}</div>`;
   }
   _renderSpikeRampLabels() {
-    const r = this.legendElement, [{ label: l, height: o }, { label: d }, { label: p, height: a }] = u(r).map(({ label: s, size: t }) => ({
+    const r = this.legendElement, [{ label: o, height: l }, { label: d }, { label: p, height: a }] = u(r).map(({ label: s, size: t }) => ({
       label: s,
       height: w(t) ? k(t.height) : 0
-    })), i = o - a, c = { position: "absolute", top: "0" }, n = { position: "absolute", top: `${i / 2}px` }, h = { position: "absolute", top: `${i}px` };
-    return g`<div class="spike-ramp-labels-container"><div class="spike-ramp-label" style=${b(c)}>${l}</div><div class="spike-ramp-label" style=${b(n)}>${d}</div><div class="spike-ramp-label" style=${b(h)}>${p}</div></div>`;
+    })), i = l - a, c = { position: "absolute", top: "0" }, n = { position: "absolute", top: `${i / 2}px` }, h = { position: "absolute", top: `${i}px` };
+    return v`<div class="spike-ramp-labels-container"><div class="spike-ramp-label" style=${b(c)}>${o}</div><div class="spike-ramp-label" style=${b(n)}>${d}</div><div class="spike-ramp-label" style=${b(h)}>${p}</div></div>`;
   }
 }
 W("arcgis-legend-spike-ramp", j);

package/dist/components/arcgis-line-of-sight/customElement.d.ts

@@ -201,8 +201,8 @@ export abstract class ArcgisLineOfSight extends LitElement {
    */
   get state(): "created" | "creating" | "disabled" | "ready";
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-line-of-sight component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-line-of-sight component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: SceneView | undefined;
   /** Clear the current analysis results. After calling this method, the user can set a new observer and targets. */

package/dist/components/arcgis-line-of-sight/customElement.js

@@ -40,10 +40,10 @@ u([
 n = u([
   M("esri.components.LineOfSight.LineOfSightViewModel")
 ], n);
-const O = x(n);
-class B extends m {
+const O = n, B = x(O);
+class S extends m {
   constructor() {
-    super(...arguments), this.viewModel = O(this), this._messages = b({ blocking: !0 }), this.view = this.viewModel.view, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.hideContinueButton = !1, this.hideDoneButton = !1, this.hideStartButton = !1, this.hideVisualization = this.viewModel.hideVisualization, this.icon = "line-of-sight", this.arcgisPropertyChange = _()("analysis", "state"), this.arcgisReady = w();
+    super(...arguments), this.viewModel = B(this), this._messages = b({ blocking: !0 }), this.view = this.viewModel.view, this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.hideContinueButton = !1, this.hideDoneButton = !1, this.hideStartButton = !1, this.hideVisualization = this.viewModel.hideVisualization, this.icon = "line-of-sight", this.arcgisPropertyChange = _()("analysis", "state"), this.arcgisReady = w();
   }
   static {
     this.properties = { view: 0, analysis: 0, autoDestroyDisabled: 5, hideContinueButton: 5, hideDoneButton: 5, hideStartButton: 5, hideVisualization: 5, icon: 3, label: 1, messageOverrides: 0, referenceElement: 1, state: 32, _supported: 16 };
@@ -94,7 +94,7 @@ class B extends m {
 function d({ className: t, onClick: e, primary: r, disabled: a, children: i }) {
   return o`<calcite-button .appearance=${r ? "solid" : "outline-fill"} class=${h(t)} .disabled=${a} @click=${e}>${i}</calcite-button>`;
 }
-f("arcgis-line-of-sight", B);
+f("arcgis-line-of-sight", S);
 export {
-  B as ArcgisLineOfSight
+  S as ArcgisLineOfSight
 };

package/dist/components/arcgis-link-chart/customElement.d.ts

@@ -35,7 +35,7 @@ import type { ResizeAlign } from "@arcgis/core/views/2d/types.js";
 import type { SlotGroupRefs } from "../../support/slots.js";
 
 /**
- * Loads a [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/) from an [ArcGIS Enterprise portal](https://enterprise.arcgis.com/en/portal/latest/administer/windows/what-is-portal-for-arcgis-.htm) into a [LinkChartView](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/).
+ * Loads a [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/) from an [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html) into a [LinkChartView](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/).
  *
  * Note: Sign in to access the data in this demo, U/P: `viewer01`/`I68VGU^nMurF`
  *
@@ -95,7 +95,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor animationsDisabled: boolean;
   /**
-   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements).
+   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
    *
    * @since 4.34
    */
@@ -732,6 +732,8 @@ export abstract class ArcgisLinkChart extends LitElement {
   destroy(): Promise<void>;
   /**
    * Use this method to query for features at a given screen location. These features come from origins (layers and sublayers) configured with a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) and have its [FeatureLayer.popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#popupEnabled) set. One example could be a custom side panel that displays feature-specific information based on an end user's click location. This method allows a developer to control how the input location is handled, and then subsequently, what to do with the results.
+   * > [!WARNING]
+   * > Using [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect) as the hit target is considered **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** functionality.
    *
    * @param hitTarget
    * @param options

package/dist/components/arcgis-link-chart/customElement.js

@@ -4,7 +4,7 @@ import { watch as n } from "@arcgis/core/core/reactiveUtils.js";
 import _ from "@arcgis/core/views/LinkChartView.js";
 import b from "@arcgis/core/WebLinkChart.js";
 import { LitElement as V, createEvent as c, safeClassMap as w } from "@arcgis/lumina";
-import { reCreateAccessor as A, reEmitEvent as e, makeAccessorController as f } from "@arcgis/lumina/controllers/accessor";
+import { makeAccessorController as f, reEmitEvent as e, reCreateAccessor as A } from "@arcgis/lumina/controllers/accessor";
 import { createRef as v, ref as m } from "lit/directives/ref.js";
 import { s as I } from "../../chunks/esri-main.js";
 import { s as E } from "../../chunks/slots.js";

package/dist/components/arcgis-link-chart-layout-switcher/customElement.d.ts

@@ -131,8 +131,8 @@ export abstract class ArcgisLinkChartLayoutSwitcher extends LitElement {
    */
   get state(): LinkChartLayoutSwitcherViewModelState;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-link-chart-layout-switcher component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-link-chart-layout-switcher component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: LinkChartView | null | undefined;
   /** Permanently destroy the component. */

package/dist/components/arcgis-link-chart-nonspatial-visibility-toggle/customElement.d.ts

@@ -48,8 +48,8 @@ export abstract class ArcgisLinkChartNonspatialVisibilityToggle extends LitEleme
    */
   get state(): State;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-link-chart-nonspatial-visibility-toggle component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-link-chart-nonspatial-visibility-toggle component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: LinkChartView | undefined;
   /**

package/dist/components/arcgis-locate/customElement.d.ts

@@ -12,7 +12,7 @@ import type { Button as Button } from "@esri/calcite-components/components/calci
 /**
  * The Locate component animates the Map or Scene to the user's current location.
  *
- * This component uses the browser's [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts), such as HTTPS.
+ * This component uses the browser's [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/docs/Web/Security/Defenses/Secure_Contexts), such as HTTPS.
  * `localhost` is considered "potentially secure" and can be used for testing.
  *
  * > [!WARNING]
@@ -145,8 +145,8 @@ export abstract class ArcgisLocate extends LitElement {
   /** The current state of the component. */
   get state(): State;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-locate component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-locate component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /**