@esri/hub-web-components 0.26.1 → 0.27.0

package/dist/components/arcgis-layout-row/customElement.js

@@ -1,45 +1,44 @@
 import { c as l } from "../../chunks/runtime.js";
-import { html as s } from "lit-html";
-import { keyed as e } from "lit-html/directives/keyed.js";
-import { LitElement as d, noShadowRoot as m, safeClassMap as i, safeStyleMap as g } from "@arcgis/lumina";
-import { a as c } from "../../chunks/getResponsiveClasses.js";
+import { html as r } from "lit-html";
+import { keyed as s } from "lit-html/directives/keyed.js";
+import { LitElement as m, noShadowRoot as d, safeClassMap as e, safeStyleMap as c } from "@arcgis/lumina";
+import { a as g } from "../../chunks/getResponsiveClasses.js";
 import { Logger as a } from "@esri/hub-common";
 import { spreadProps as p } from "@open-wc/lit-helpers";
-import { a as h } from "../../chunks/typeGuards.js";
+import { a as y } from "../../chunks/typeGuards.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
-class y extends d {
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+class $ extends m {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;
   }
   static {
-    this.properties = { node: 0, highlightedNode: 0, utils: 0, debug: 5, isEditMode: 5 };
+    this.properties = { node: 0, activatedNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = m;
+    this.shadowRootOptions = d;
   }
   _getChildClasses(t) {
-    const r = c(t);
-    return t.id === this.highlightedNode?.id && r.push("current-node"), r;
+    return g(t);
   }
   render() {
-    const { debug: t, utils: r } = this;
+    const { debug: t, utils: i } = this;
     return this.node.children?.map((o) => {
-      const { id: n } = o;
-      if (!h(o)) {
-        a.warn(`Child with id ${n} in arcgis-layout-row is not a column.`);
+      const { id: u } = o;
+      if (!y(o)) {
+        a.warn(`Child with id ${u} in arcgis-layout-row is not a column.`);
         return;
       }
       try {
-        return e(o.id, s`<arcgis-layout-column class=${i(this._getChildClasses(o).join(" "))} .highlightedNode=${this.highlightedNode} .debug=${t} .isEditMode=${this.isEditMode} .node=${o} .utils=${r} style=${g(o.styles)} .role=${o.columnProps?.role} .ariaLabel=${o.columnProps?.ariaLabel} ${p(o.properties ?? {})}></arcgis-layout-column>`);
-      } catch (u) {
-        return a.error(`Error rendering column with id ${o.id} in arcgis-hub-layout-row:`, u), t ? e(o.id, s`<arcgis-layout-column class=${i({ "layout-error": t })} .debug=${t} .node=${{ id: o.id, tag: "arcgis-layout-column" }}></arcgis-layout-column>`) : null;
+        return s(o.id, r`<arcgis-layout-column class=${e(this._getChildClasses(o).join(" "))} .activatedNode=${this.activatedNode} .debug=${t} .isEditMode=${this.isEditMode} .node=${o} .utils=${i} style=${c(o.styles)} .role=${o.columnProps?.role} .ariaLabel=${o.columnProps?.ariaLabel} ${p(o.properties ?? {})}></arcgis-layout-column>`);
+      } catch (n) {
+        return a.error(`Error rendering column with id ${o.id} in arcgis-hub-layout-row:`, n), t ? s(o.id, r`<arcgis-layout-column class=${e({ "layout-error": t })} .debug=${t} .node=${{ id: o.id, tag: "arcgis-layout-column" }}></arcgis-layout-column>`) : null;
       }
     }) ?? [];
   }
 }
-l("arcgis-layout-row", y);
+l("arcgis-layout-row", $);
 export {
-  y as ArcgisLayoutRow
+  $ as ArcgisLayoutRow
 };

package/dist/components/arcgis-layout-section/customElement.d.ts

@@ -7,10 +7,11 @@ export declare class ArcgisLayoutSection extends LitElement {
     /** The section node to render. */
     node: ISection;
     /**
-     * The currently focused/hovered node. Used to show
-     * configuration controls and active state in the UI.
+     * The layout node that is currently activated for editing.
+     * This is tracked in order to show the node's configuration
+     * controls and "active" state in the UI.
      */
-    highlightedNode?: ILayoutNode;
+    activatedNode?: ILayoutNode;
     /**
      * Utility functions passed down to all child layout
      * components. Used for processing remote layouts

package/dist/components/arcgis-layout-section/customElement.js

@@ -1,45 +1,44 @@
-import { c as g } from "../../chunks/runtime.js";
-import { html as e } from "lit-html";
-import { keyed as i } from "lit-html/directives/keyed.js";
-import { LitElement as u, noShadowRoot as l, safeClassMap as a, safeStyleMap as h } from "@arcgis/lumina";
+import { c as u } from "../../chunks/runtime.js";
+import { html as s } from "lit-html";
+import { keyed as e } from "lit-html/directives/keyed.js";
+import { LitElement as l, noShadowRoot as g, safeClassMap as i, safeStyleMap as m } from "@arcgis/lumina";
 import { i as p } from "../../chunks/typeGuards.js";
-import { g as m } from "../../chunks/getResponsiveClasses.js";
-import { Logger as d } from "@esri/hub-common";
-import { spreadProps as c } from "@open-wc/lit-helpers";
+import { g as c } from "../../chunks/getResponsiveClasses.js";
+import { Logger as a } from "@esri/hub-common";
+import { spreadProps as w } from "@open-wc/lit-helpers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
-class w extends u {
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+class y extends l {
   constructor() {
     super(...arguments), this.debug = !1, this.isEditMode = !1;
   }
   static {
-    this.properties = { node: 0, highlightedNode: 0, utils: 0, debug: 5, isEditMode: 5 };
+    this.properties = { node: 0, activatedNode: 0, utils: 0, debug: 5, isEditMode: 5 };
   }
   static {
-    this.shadowRootOptions = l;
+    this.shadowRootOptions = g;
   }
-  _getChildClasses(r) {
-    const t = m(r);
-    return r.id === this.highlightedNode?.id && t.push("current-node"), t;
+  _getChildClasses(o) {
+    return c(o);
   }
   render() {
-    const { debug: r, utils: t } = this;
-    return (this.node.children ?? []).map((o) => {
-      const { id: s } = o;
-      if (!p(o)) {
-        d.warn(`Child with id ${s} in arcgis-layout-section is not a row.`);
+    const { debug: o, utils: d } = this;
+    return (this.node.children ?? []).map((r) => {
+      const { id: t } = r;
+      if (!p(r)) {
+        a.warn(`Child with id ${t} in arcgis-layout-section is not a row.`);
         return;
       }
       try {
-        return i(o.id, e`<arcgis-layout-row class=${a(this._getChildClasses(o).join(" "))} .highlightedNode=${this.highlightedNode} .debug=${r} .isEditMode=${this.isEditMode} .node=${o} .utils=${t} style=${h(o.styles)} .role=${o.rowProps?.role} .ariaLabel=${o.rowProps?.ariaLabel} ${c(o.properties ?? {})}></arcgis-layout-row>`);
+        return e(r.id, s`<arcgis-layout-row class=${i(this._getChildClasses(r).join(" "))} .activatedNode=${this.activatedNode} .debug=${o} .isEditMode=${this.isEditMode} .node=${r} .utils=${d} style=${m(r.styles)} .role=${r.rowProps?.role} .ariaLabel=${r.rowProps?.ariaLabel} ${w(r.properties ?? {})}></arcgis-layout-row>`);
       } catch (n) {
-        return d.error(`Error rendering row with id ${s} in arcgis-hub-layout-row:`, n), i(o.id, e`<arcgis-layout-row class=${a({ "layout-error": r })} .debug=${r} .node=${{ id: o.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
+        return a.error(`Error rendering row with id ${t} in arcgis-hub-layout-row:`, n), e(r.id, s`<arcgis-layout-row class=${i({ "layout-error": o })} .debug=${o} .node=${{ id: r.id, tag: "arcgis-layout-row" }}></arcgis-layout-row>`);
       }
     });
   }
 }
-g("arcgis-layout-section", w);
+u("arcgis-layout-section", y);
 export {
-  w as ArcgisLayoutSection
+  y as ArcgisLayoutSection
 };

package/dist/components/arcgis-nav-card/customElement.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { IConfigurableLayoutNode, ILayoutNode, ILayoutNodeConfig, ISection, ITranslationMap, LayoutUtils } from '@esri/hub-common';
+import { ILayoutNodeActivateEventDetail } from '../layouts/utils/layout-event-types';
 
 /**
  * The nav card is intended to render various
@@ -28,7 +29,12 @@ export declare class ArcgisNavCard extends LitElement {
      * @default false
      */
     isEditMode: boolean;
-    highlightedNode?: ILayoutNode;
+    /**
+     * The layout node that is currently activated for editing. This is
+     * tracked in order to show the node's configuration
+     * controls and "active" state in the UI.
+     */
+    activatedNode?: ILayoutNode;
     /**
      * Utility functions passed down to all child layout
      * components. For now, this is specifically needed to
@@ -42,6 +48,6 @@ export declare class ArcgisNavCard extends LitElement {
      * @default false
      */
     debug: boolean;
-    highlightHandler?: (event: MouseEvent) => void;
-    unHighlightHandler?: (event: MouseEvent) => void;
+    readonly arcgisLayoutActivateNode: TargetedEvent<this, ILayoutNodeActivateEventDetail>;
+    readonly arcgisLayoutNodeFocus: TargetedEvent<this, boolean>;
 }

package/dist/components/arcgis-nav-card/customElement.js

@@ -1,29 +1,31 @@
-import { c as d } from "../../chunks/runtime.js";
-import { html as l } from "lit-html";
-import { LitElement as c, noShadowRoot as h, nothing as g, safeClassMap as b, safeStyleMap as u } from "@arcgis/lumina";
-import { u as f } from "../../chunks/useT9n.js";
-import { getProp as r } from "@esri/hub-common";
-import { i as m } from "../../chunks/isNodeVisible.js";
-import { b as p } from "../../chunks/getResponsiveClasses.js";
+import { c as h } from "../../chunks/runtime.js";
+import { html as o } from "lit-html";
+import { LitElement as v, createEvent as d, noShadowRoot as b, safeClassMap as r, nothing as n, safeStyleMap as f } from "@arcgis/lumina";
+import { css as m } from "@lit/reactive-element/css-tag.js";
+import { u as g } from "../../chunks/useT9n.js";
+import { getProp as u } from "@esri/hub-common";
+import { i as p } from "../../chunks/isNodeVisible.js";
+import { b as N } from "../../chunks/getResponsiveClasses.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
-function v(i, e, t, s) {
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+const $ = m`@layer{arcgis-nav-card{display:block}arcgis-nav-card[is-edit-mode] calcite-tab-nav:hover,arcgis-nav-card[is-edit-mode] calcite-tab-nav:focus{--calcite-internal-color-focus: var(--calcite-ui-brand);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:1px}arcgis-nav-card[is-edit-mode] calcite-tab-nav.activated{--calcite-internal-color-focus: var(--calcite-ui-brand-hover);cursor:pointer;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-width:2px;calcite-label,calcite-button{opacity:1}}}`;
+function _(a, t, i, e) {
   {
-    let a = i;
-    const o = r(s, `${e}.${i}`);
-    if (o)
-      a = o;
+    let s = a;
+    const c = u(e, `${t}.${a}`);
+    if (c)
+      s = c;
     else {
-      const n = r(t, i);
-      n && (a = n);
+      const l = u(i, a);
+      l && (s = l);
     }
-    return a;
+    return s;
   }
 }
-class $ extends c {
+class y extends v {
   constructor() {
-    super(...arguments), this._messages = f(), this.layoutNodeConfig = {
+    super(...arguments), this._messages = g(), this.layoutNodeConfig = {
       tag: "arcgis-nav-card",
       name: "Nav Card",
       disableEdit: !1,
@@ -41,33 +43,49 @@ class $ extends c {
         repositionDownLabel: "Move nav card down"
       }
       // editor: {}
-    }, this.sections = [], this.translations = {}, this.isEditMode = !1, this.debug = !1;
+    }, this.sections = [], this.translations = {}, this.isEditMode = !1, this.debug = !1, this.arcgisLayoutActivateNode = d(), this.arcgisLayoutNodeFocus = d();
   }
   static {
-    this.properties = { layoutNodeConfig: 32, node: 0, sections: 0, translations: 0, isEditMode: 5, highlightedNode: 0, utils: 0, debug: 5, highlightHandler: 0, unHighlightHandler: 0 };
+    this.properties = { layoutNodeConfig: 32, node: 0, sections: 0, translations: 0, isEditMode: 7, activatedNode: 0, utils: 0, debug: 5 };
   }
   static {
-    this.shadowRootOptions = h;
+    this.shadowRootOptions = b;
+  }
+  static {
+    this.styles = $;
   }
   get _visibleSections() {
-    return this.sections.filter((e) => m(e));
+    return this.sections.filter((t) => p(t));
   }
   get _hasSections() {
     return this._visibleSections.length > 0;
   }
-  _getSectionClasses(e) {
-    const t = p(e);
-    return e.id === this.highlightedNode?.id && t.push("current-node"), t;
+  _handleNodeClick(t) {
+    this.isEditMode && (t.stopPropagation(), t.preventDefault(), this.arcgisLayoutActivateNode.emit({
+      node: this.node
+    }));
+  }
+  _handleNodeKeyDown(t) {
+    this.isEditMode && (t.key === "Enter" || t.key === " ") && this._handleNodeClick(t);
+  }
+  _handleTabNavFocus() {
+    this.arcgisLayoutNodeFocus.emit(!0);
+  }
+  _handleTabNavDefocus() {
+    this.arcgisLayoutNodeFocus.emit(!1);
+  }
+  _getSectionClasses(t) {
+    return N(t);
   }
   renderTabs() {
-    let e;
-    return this._hasSections && (e = l`<calcite-tabs scale=l><calcite-tab-nav data-node-id=${this.node.id ?? g} slot=title-group>${this._visibleSections.map((t, s) => l`<calcite-tab-title .selected=${s === 0} .tab=${t.label}>${v(t.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((t, s) => l`<calcite-tab .selected=${s === 0} .tab=${t.label}><arcgis-layout-section class=${b(this._getSectionClasses(t).join(" "))} .highlightedNode=${this.highlightedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${t} style=${u(t.styles)} .utils=${this.utils}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), e;
+    let t;
+    return this._hasSections && (t = o`<calcite-tabs scale=l><calcite-tab-nav class=${r({ activated: this.node.id === this.activatedNode?.id })} data-node-id=${this.node.id ?? n} @click=${this.isEditMode ? this._handleNodeClick : void 0} @keydown=${this.isEditMode ? this._handleNodeKeyDown : void 0} @mouseenter=${this.isEditMode ? this._handleTabNavFocus : void 0} @mouseleave=${this.isEditMode ? this._handleTabNavDefocus : void 0} @focus=${this.isEditMode ? this._handleTabNavFocus : void 0} @blur=${this.isEditMode ? this._handleTabNavDefocus : void 0} slot=title-group tabindex=${(this.isEditMode ? 0 : void 0) ?? n}>${this._visibleSections.map((i, e) => o`<calcite-tab-title .selected=${e === 0} .tab=${i.label}>${_(i.label ?? "", this._messages._t9nLocale, this._messages, this.translations)}</calcite-tab-title>`)}</calcite-tab-nav>${this._visibleSections.map((i, e) => o`<calcite-tab .selected=${e === 0} .tab=${i.label}><arcgis-layout-section class=${r(this._getSectionClasses(i).join(" "))} .activatedNode=${this.activatedNode} .debug=${this.debug} .isEditMode=${this.isEditMode} .node=${i} style=${f(i.styles)} .utils=${this.utils}></arcgis-layout-section></calcite-tab>`)}</calcite-tabs>`), t;
   }
   render() {
     return this.renderTabs();
   }
 }
-d("arcgis-nav-card", $);
+h("arcgis-nav-card", y);
 export {
-  $ as ArcgisNavCard
+  y as ArcgisNavCard
 };

package/dist/components/arcgis-text-card/customElement.js

@@ -6,9 +6,9 @@ import { sanitizeHtml as r } from "@esri/hub-components";
 import { getProp as t } from "@esri/hub-common";
 import { u as l } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
-const a = o`:host>div>h1:first-child,:host>div>h2:first-child,:host>div>h3:first-child,:host>div>h4:first-child,:host>div>h5:first-child,:host>div>h6:first-child,:host>div>p:first-child{margin-top:0}`;
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+const a = o`:host{display:block}:host>div>h1:first-child,:host>div>h2:first-child,:host>div>h3:first-child,:host>div>h4:first-child,:host>div>h5:first-child,:host>div>h6:first-child,:host>div>p:first-child{margin-top:0}`;
 class d extends i {
   constructor() {
     super(...arguments), this._messages = l(), this.html = "";

package/dist/components/layouts/components/layout-node/customElement.d.ts

@@ -26,7 +26,6 @@ export declare function ArcgisLayoutNode({ tagName, props, classes, styles, chil
     /** Additional node options */
     options: {
         isEditMode?: boolean;
-        onMouseEnter?: ((event: MouseEvent) => void) | undefined;
-        onMouseLeave?: ((event: MouseEvent) => void) | undefined;
+        slotted?: boolean;
     };
 }): JsxNode;

package/dist/components/layouts/components/layout-node/customElement.js

@@ -1,96 +1,90 @@
 import { html as e } from "lit-html";
-import { safeStyleMap as s, deferLoad as d } from "@arcgis/lumina";
-import { spread as $, spreadProps as g, spreadEvents as b } from "@open-wc/lit-helpers";
-import { getProp as y } from "@esri/hub-common";
-import { i as v } from "../../../../chunks/isNodeVisible.js";
+import { keyed as m } from "lit-html/directives/keyed.js";
+import { safeStyleMap as r, deferLoad as g } from "@arcgis/lumina";
+import { spread as $, spreadProps as s } from "@open-wc/lit-helpers";
+import { getProp as h } from "@esri/hub-common";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
-See https://js.arcgis.com/0.26/esri/copyright.txt for details.
-v0.26.1 */
-function N({ tagName: k, props: u, classes: w, styles: a, children: o, options: n }) {
-  const m = n.onMouseLeave, h = n.onMouseEnter, l = y(u, "node.id"), c = {
+See https://js.arcgis.com/0.27/esri/copyright.txt for details.
+v0.27.0 */
+function M({ tagName: d, props: u, classes: y, styles: t, children: b, options: o }) {
+  const n = h(u, "node.id"), i = {
     ...u,
-    isEditMode: n.isEditMode,
-    tabIndex: n.isEditMode ? 0 : void 0
-  }, t = {
-    class: w,
-    "data-node-id": l,
-    label: u.label
+    isEditMode: o.isEditMode
+  }, c = {
+    class: y,
+    "data-node-id": n,
+    label: u.label,
     // label must be an attribute
-  }, r = {
-    mouseleave: m,
-    mouseenter: h,
-    focus: h
+    inert: o.isEditMode && d !== "arcgis-nav-card" ? !0 : void 0
   };
-  (!v(y(u, "node")) || n.isEditMode) && (a || (a = {}), a["anchor-name"] = `--overlay-anchor-${l}`);
-  let i;
-  switch (k) {
+  let a;
+  switch (d) {
     case "arcgis-layout-row":
-      i = e`<arcgis-layout-row style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-layout-row>`;
+      a = e`<arcgis-layout-row style=${r(t)} ${$(c)} ${s(i)}>${b}</arcgis-layout-row>`;
       break;
     case "calcite-button":
-      i = e`<calcite-button style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</calcite-button>`;
+      a = e`<calcite-button style=${r(t)} ${$(c)} ${s(i)}>${b}</calcite-button>`;
       break;
     case "calcite-chip":
-      i = e`<calcite-chip .label=${u.label} style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</calcite-chip>`;
+      a = e`<calcite-chip .label=${u.label} style=${r(t)} ${$(c)} ${s(i)}>${b}</calcite-chip>`;
       break;
     case "calcite-avatar":
-      i = e`<calcite-avatar style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</calcite-avatar>`;
+      a = e`<calcite-avatar style=${r(t)} ${$(c)} ${s(i)}>${b}</calcite-avatar>`;
       break;
     case "arcgis-text-card":
-      i = e`<arcgis-text-card style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-text-card>`;
+      a = e`<arcgis-text-card style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-text-card>`;
       break;
     case "arcgis-hub-gallery-card":
-      i = e`<arcgis-hub-gallery-card style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-gallery-card>`;
+      a = e`<arcgis-hub-gallery-card style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-gallery-card>`;
       break;
     case "arcgis-hub-image":
-      i = e`<arcgis-hub-image style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-image>`;
+      a = e`<arcgis-hub-image style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-image>`;
       break;
     case "arcgis-hub-embed-card":
-      i = e`<arcgis-hub-embed-card style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-embed-card>`;
+      a = e`<arcgis-hub-embed-card style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-embed-card>`;
       break;
     case "arcgis-nav-card":
-      i = e`<arcgis-nav-card .highlightHandler=${h} .unHighlightHandler=${m} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-nav-card>`;
+      a = e`<arcgis-nav-card style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-nav-card>`;
       break;
     case "arcgis-hub-timeline":
-      i = e`<arcgis-hub-timeline style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-timeline>`;
+      a = e`<arcgis-hub-timeline style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-timeline>`;
       break;
     case "arcgis-hub-entity-metadata":
-      i = e`<arcgis-hub-entity-metadata style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-metadata>`;
+      a = e`<arcgis-hub-entity-metadata style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-entity-metadata>`;
       break;
     case "arcgis-hub-catalog":
-      i = e`<arcgis-hub-catalog .catalogs=${u.catalogs} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-catalog>`;
+      a = e`<arcgis-hub-catalog .catalogs=${u.catalogs} style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-catalog>`;
       break;
     case "arcgis-hub-map-view":
-      i = e`<arcgis-hub-map-view style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-map-view>`;
+      a = e`<arcgis-hub-map-view style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-map-view>`;
       break;
     case "arcgis-hub-entity-metrics-card":
-      i = e`<arcgis-hub-entity-metrics-card .entity=${u.entity} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-metrics-card>`;
+      a = e`<arcgis-hub-entity-metrics-card .entity=${u.entity} style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-entity-metrics-card>`;
       break;
     case "arcgis-hub-entity-associations-card":
-      i = e`<arcgis-hub-entity-associations-card .entity=${u.entity} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-associations-card>`;
+      a = e`<arcgis-hub-entity-associations-card .entity=${u.entity} style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-entity-associations-card>`;
       break;
     case "arcgis-hub-entity-status-card":
-      i = e`<arcgis-hub-entity-status-card .entity=${u.entity} style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-status-card>`;
+      a = e`<arcgis-hub-entity-status-card .entity=${u.entity} style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-entity-status-card>`;
       break;
     case "arcgis-hub-entity-metrics-view":
-      i = e`<arcgis-hub-entity-metrics-view style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-metrics-view>`;
+      a = e`<arcgis-hub-entity-metrics-view style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-entity-metrics-view>`;
       break;
     case "arcgis-hub-project-initiatives-view":
-      i = e`<arcgis-hub-project-initiatives-view style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-project-initiatives-view>`;
+      a = e`<arcgis-hub-project-initiatives-view style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-project-initiatives-view>`;
       break;
     case "arcgis-hub-entity-hero":
-      i = e`<arcgis-hub-entity-hero style=${s(a)} ${d} ${$(t)} ${g(c)} ${b(r)}>${o}</arcgis-hub-entity-hero>`;
+      a = e`<arcgis-hub-entity-hero style=${r(t)} ${g} ${$(c)} ${s(i)}>${b}</arcgis-hub-entity-hero>`;
       break;
     case "div":
-      i = e`<div .innerHTML=${u.html ?? ""} style=${s(a)} ${$(t)} ${g(c)} ${b(r)}></div>`;
+      a = e`<div .innerHTML=${u.html ?? ""} style=${r(t)} ${$(c)} ${s(i)}></div>`;
       break;
     // Add more cases as needed
     default:
-      i = e`<div style=${s(a)} ${$(t)} ${g(c)} ${b(r)}>${o}</div>`;
+      a = e`<div style=${r(t)} ${$(c)} ${s(i)}>${b}</div>`;
   }
-  const f = v(y(u, "node")) ? i : e`${i}<arcgis-layout-node-overlay .nodeId=${l} type=hidden ${d} ${$(t)}></arcgis-layout-node-overlay>`;
-  return e`${f}${n.isEditMode && e`<arcgis-layout-node-highlight .highlightedNode=${u.highlightedNode} .node=${u.node}></arcgis-layout-node-highlight>` || ""}`;
+  return o.slotted ? a : m(n, e`<arcgis-layout-node-wrapper .activatedNode=${u.activatedNode} .isEditMode=${o.isEditMode} .node=${u.node}>${a}</arcgis-layout-node-wrapper>`);
 }
 export {
-  N as ArcgisLayoutNode
+  M as ArcgisLayoutNode
 };

package/dist/components/layouts/components/layout-node/index.d.ts

@@ -13,10 +13,9 @@ import "../../../arcgis-hub-entity-status-card/index.js";
 import "@esri/hub-components/dist/components/arcgis-hub-entity-metrics-view.js";
 import "@esri/hub-components/dist/components/arcgis-hub-project-initiatives-view.js";
 import "@esri/hub-components/dist/components/arcgis-hub-entity-hero.js";
-import "../../../arcgis-layout-node-overlay/index.js";
 import "../../../arcgis-layout-row/index.js";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-avatar";
-import "../../../arcgis-layout-node-highlight/index.js";
+import "../../../arcgis-layout-node-wrapper/index.js";
 export * from "./customElement.js";

package/dist/components/layouts/components/layout-node/index.js

@@ -3,7 +3,7 @@ import "../../../arcgis-layout-row/index.js";
 import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-avatar";
-import "../../../arcgis-layout-node-highlight/index.js";
+import "../../../arcgis-layout-node-wrapper/index.js";
 export * from "./customElement.js";
 deferredLoaders.set("arcgis-text-card", () => import("../../../arcgis-text-card/index.js"))
 .set("arcgis-hub-gallery-card", () => import("@esri/hub-components/dist/components/arcgis-hub-gallery-card.js"))
@@ -20,5 +20,4 @@ deferredLoaders.set("arcgis-text-card", () => import("../../../arcgis-text-card/
 .set("arcgis-hub-entity-metrics-view", () => import("@esri/hub-components/dist/components/arcgis-hub-entity-metrics-view.js"))
 .set("arcgis-hub-project-initiatives-view", () => import("@esri/hub-components/dist/components/arcgis-hub-project-initiatives-view.js"))
 .set("arcgis-hub-entity-hero", () => import("@esri/hub-components/dist/components/arcgis-hub-entity-hero.js"))
-.set("arcgis-layout-node-overlay", () => import("../../../arcgis-layout-node-overlay/index.js"))
 ;

package/dist/components/layouts/utils/layout-event-types.d.ts

@@ -0,0 +1,14 @@
+import { HTMLConfigurableLayoutNodeElement, ILayoutNode, LayoutNode } from '@esri/hub-common';
+import { IAddLayoutNodeConfiguration } from './getAddableLayoutNodes';
+export interface ILayoutNodeActivateEventDetail {
+    node: LayoutNode;
+}
+export interface ILayoutNodeAddEventDetail {
+    adjacentNode: ILayoutNode;
+    position: "after" | "before";
+    config: IAddLayoutNodeConfiguration;
+}
+export interface ILayoutNodeEditEventDetail {
+    node: LayoutNode;
+    element: HTMLConfigurableLayoutNodeElement;
+}

package/dist/components/layouts/utils/layoutContext.d.ts

@@ -7,9 +7,13 @@ import { ILayout } from '@esri/hub-common';
  */
 export declare const layoutContext: {
     __context__: {
-        /** localized messages from the layout container */
-        messages: ArcgisLayoutContainer["_messages"];
+        /** Whether the layout is valid */
+        isLayoutValid: boolean;
         /** the processed layout */
         layout: ILayout | undefined;
+        /** a reference to the layout node editor panel */
+        layoutNodeEditorRef: HTMLCalcitePanelElement | undefined;
+        /** localized messages from the layout container */
+        messages: ArcgisLayoutContainer["_messages"];
     };
 };