@arcgis/coding-components 5.0.0-next.111 → 5.0.0-next.113

package/dist/components/arcgis-code-editor-shell/customElement.d.ts

@@ -0,0 +1,17 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+
+/**
+ * A layout component for code editors that provides slots for an editor, results panel, side panel, and action bars.
+ *
+ * [Read more...](https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-editor-shell/)
+ *
+ * @slot [top-action-bar] - A slot for placing a top action bar above the editor area.
+ * @slot [editor] - A slot for placing the main code editor component.
+ * @slot [results-panel] - A slot for placing a results panel below the code editor.
+ * @slot [side-panel] - A slot for placing a side panel next to the code editor area.
+ * @slot [side-action-bar] - A slot for placing a side action bar next to the side panel.
+ * @internal
+ */
+export declare class CodeEditorShell extends LitElement {
+}

package/dist/components/arcgis-code-editor-shell/customElement.js

@@ -0,0 +1,19 @@
+import { c as o } from "../../chunks/runtime.js";
+import { css as e, html as n } from "lit";
+import { LitElement as r } from "@arcgis/lumina";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const i = e`:host{--arcgis-coding-components-internal-border: var( --arcgis-coding-components-border, 1px solid var(--calcite-color-border-3) );--arcgis-coding-components-internal-background-color: var( --arcgis-coding-components-background-color, var(--calcite-color-foreground-1) );--arcgis-coding-components-internal-side-action-bar-max-w: var(--arcgis-coding-components-side-action-bar-max-w, 25%);--arcgis-coding-components-internal-code-editor-side-panel-w: var( --arcgis-coding-components-code-editor-side-panel-w, 600px );--arcgis-coding-components-internal-code-editor-side-panel-max-w: var( --arcgis-coding-components-code-editor-side-panel-max-w, 45% );--arcgis-coding-components-internal-code-editor-results-panel-max-h: var( --arcgis-coding-components-code-editor-results-panel-max-h, 50% );--arcgis-coding-components-internal-code-editor-results-panel-h: var( --arcgis-coding-components-code-editor-results-panel-h, 50% );display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--arcgis-coding-components-internal-border);box-sizing:border-box;background-color:var(--arcgis-coding-components-internal-background-color);height:100%;.flex-adjustable{flex:1 1 auto;overflow:hidden}.flex-row{display:flex;flex-direction:row;overflow:hidden}.flex-column{display:flex;flex-direction:column;overflow:hidden}}slot[name=top-action-bar]::slotted(*){border-bottom:var(--arcgis-coding-components-internal-border);flex:0 0 auto}slot[name=side-panel]::slotted(*){max-width:var(--arcgis-coding-components-internal-code-editor-side-panel-max-w);width:var(--arcgis-coding-components-internal-code-editor-side-panel-w);border-inline-start:var(--arcgis-coding-components-internal-border);box-sizing:border-box;flex:1 0 auto}slot[name=side-panel]::slotted(.hidden){display:none}slot[name=editor]::slotted(*){flex:1 1 auto;overflow:hidden}slot[name=results-panel]::slotted(*){flex:0 0 var(--arcgis-coding-components-internal-code-editor-results-panel-h);overflow:hidden;border-top:var(--arcgis-coding-components-internal-border);box-sizing:border-box;max-height:var(--arcgis-coding-components-internal-code-editor-results-panel-max-h);margin-bottom:-1px}slot[name=side-action-bar]::slotted(*){max-width:var(--arcgis-coding-components-internal-side-action-bar-max-w);border-inline-start:var(--arcgis-coding-components-internal-border)}`;
+class t extends r {
+  static {
+    this.styles = [i];
+  }
+  render() {
+    return n`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><slot name=results-panel></slot></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
+  }
+}
+o("arcgis-code-editor-shell", t);
+export {
+  t as CodeEditorShell
+};

package/dist/components/arcgis-code-editor-shell/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-code-editor-shell/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-code-viewer/customElement.js

@@ -12,7 +12,7 @@ import { Task as N } from "@lit/task";
 import { rethrowError as O, log as w } from "@arcgis/toolkit/log";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.111 */
+v5.0.0-next.113 */
 const z = E`pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-color-foreground-2);padding:var(--calcite-spacing-sm);white-space:pre-line;code{font-size:var(--calcite-font-size--2);font-family:var(--calcite-font-family-code)}}:host([round]){pre{border-radius:var(--calcite-corner-radius-round)}}`;
 class L extends p {
   constructor() {

package/dist/components/arcgis-editor-variables/customElement.js

@@ -8,7 +8,7 @@ import { u as m } from "../../chunks/useT9n.js";
 import { log as u } from "@arcgis/toolkit/log";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.111 */
+v5.0.0-next.113 */
 const g = n`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2);word-break:break-word}}`;
 function p(l) {
   l.key === "Enter" && l.stopPropagation();

package/dist/components/arcgis-language-api-panel/customElement.js

@@ -1,19 +1,19 @@
-import { c as r } from "../../chunks/runtime.js";
+import { c as n } from "../../chunks/runtime.js";
 import { ref as c } from "lit/directives/ref.js";
 import { css as m, html as s } from "lit";
 import { setFocusOnElement as d, focusElement as u } from "@arcgis/toolkit/dom";
 import { addLtrMark as a } from "@arcgis/toolkit/string";
 import { LitElement as h, createEvent as o } from "@arcgis/lumina";
-import { f as p } from "../../chunks/utilities.js";
-import { c as n } from "../../chunks/markdown.js";
-import { u as f } from "../../chunks/useT9n.js";
+import { f } from "../../chunks/utilities.js";
+import { c as r } from "../../chunks/markdown.js";
+import { u as p } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.111 */
-const g = m`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-block{p:first-of-type{margin-top:0}}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}}`;
+v5.0.0-next.113 */
+const g = m`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-block{p:first-of-type{margin-top:0}}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}calcite-flow{[slot=footer]{word-break:break-word}}}`;
 class b extends h {
   constructor() {
-    super(...arguments), this.messages = f(), this._unselectItem = async () => {
+    super(...arguments), this.messages = p(), this._unselectItem = async () => {
       this._selectedApiItem = void 0;
     }, this._filterValue = "", this.languageId = "arcade", this.hideDocumentationActions = !1, this.loading = !1, this.closed = !1, this.arcgisClose = o({ bubbles: !1 }), this.arcgisItemSelected = o({ bubbles: !1 });
   }
@@ -68,15 +68,15 @@ class b extends h {
     this._filterValue = e.currentTarget.value ?? "";
   }
   _elementToMarkdown(e) {
-    e !== void 0 && (e.innerHTML = n(this._selectedApiItem.examples));
+    e !== void 0 && (e.innerHTML = r(this._selectedApiItem.examples));
   }
   renderApiCategory(e) {
-    const i = p(e.items, "name", this._filterValue);
+    const i = f(e.items, "name", this._filterValue);
     return i.length ? s`<calcite-list-item-group .heading=${e.title}>${i.map((t) => s`<calcite-list-item .label=${a(t.completion.detail)} @calciteListItemSelect=${(l) => this._emitItemSelected(l, t)} @keydown=${(l) => this._emitItemSelected(l, t)}><calcite-action slot=actions-end .text=${this.messages.expand ?? ""} icon=chevron-right icon-flip-rtl scale=s @click=${(l) => this._selectItem(l, t)}></calcite-action></calcite-list-item>`)}</calcite-list-item-group>` : null;
   }
   renderApiItemFlowItem() {
     const e = this._selectedApiItem;
-    return e ? s`<calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} .beforeBack=${this._unselectItem} closable @calciteFlowItemClose=${this._emitClose} selected>${this.hideDocumentationActions ? null : s`<calcite-button width=half slot=footer appearance=outline kind=brand scale=s .href=${e.link} target=Help icon-start=information>${this.messages.moreinformation}</calcite-button>`}<calcite-button .width=${this.hideDocumentationActions ? "full" : "half"} slot=footer appearance=outline kind=brand icon-start=code scale=s @click=${(i) => this._emitItemSelectedAndClose(i, e)} ${c(u)}>${this.messages.insert}</calcite-button><calcite-block expanded .heading=${a(e.completion.detail)}><div .innerHTML=${n(e.completion.documentation) ?? ""}></div>${e.examples ? s`<div ${c(this._elementToMarkdown)}></div>` : null}</calcite-block></calcite-flow-item>` : null;
+    return e ? s`<calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} .beforeBack=${this._unselectItem} closable @calciteFlowItemClose=${this._emitClose} selected>${this.hideDocumentationActions ? null : s`<calcite-button width=half slot=footer appearance=outline kind=brand scale=s .href=${e.link} target=Help icon-start=information>${this.messages.moreinformation}</calcite-button>`}<calcite-button .width=${this.hideDocumentationActions ? "full" : "half"} slot=footer appearance=outline kind=brand icon-start=code scale=s @click=${(i) => this._emitItemSelectedAndClose(i, e)} ${c(u)}>${this.messages.insert}</calcite-button><calcite-block expanded .heading=${a(e.completion.detail)}><div .innerHTML=${r(e.completion.documentation) ?? ""}></div>${e.examples ? s`<div ${c(this._elementToMarkdown)}></div>` : null}</calcite-block></calcite-flow-item>` : null;
   }
   render() {
     if (this.closed)
@@ -85,7 +85,7 @@ class b extends h {
     return s`<calcite-flow ${c(this.flowFocusHandler)}><calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} closable @calciteFlowItemClose=${this._emitClose} .selected=${!this._selectedApiItem}><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m></calcite-input>${this.loading ? s`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"}></calcite-loader>` : s`<calcite-list label="arcade api">${i ? s`<div class="notice-container">${this.messages.noitems}</div>` : e}</calcite-list>`}</calcite-flow-item>${this.renderApiItemFlowItem()}</calcite-flow>`;
   }
 }
-r("arcgis-language-api-panel", b);
+n("arcgis-language-api-panel", b);
 export {
   b as ArcgisLanguageApiPanel
 };

package/dist/components/arcgis-sql-expression-editor/customElement.js

@@ -1,29 +1,25 @@
-import { c as n } from "../../chunks/runtime.js";
-import { css as c, html as t } from "lit";
-import { LitElement as d, createEvent as o, noShadowRoot as l, safeClassMap as r } from "@arcgis/lumina";
-import { generateGuid as p } from "@arcgis/toolkit/string";
+import { c } from "../../chunks/runtime.js";
+import { css as n, html as t } from "lit";
+import { LitElement as d, createEvent as o, safeClassMap as r } from "@arcgis/lumina";
+import { generateGuid as l } from "@arcgis/toolkit/string";
 import { a as s } from "../../chunks/sql-expr-defaults.js";
 import { u as h } from "../../chunks/useT9n.js";
-import { createRef as g, ref as f } from "lit/directives/ref.js";
-import { s as _ } from "../../chunks/editor.js";
-import { getSqlExprDiagnosticService as u } from "../../chunks/sql-expr-mode.js";
+import { createRef as p, ref as g } from "lit/directives/ref.js";
+import { getSqlExprDiagnosticService as _ } from "../../chunks/sql-expr-mode.js";
 import { rethrowError as a } from "@arcgis/toolkit/log";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.111 */
-const m = c`@layer{arcgis-sql-expression-editor{display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--arcgis-coding-components-border)!important;box-sizing:border-box;background-color:var(--arcgis-coding-components-background-color);height:100%}}`;
-class v extends d {
+v5.0.0-next.113 */
+const f = n`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}`;
+class u extends d {
   constructor() {
-    super(...arguments), this._codeEditorElt = g(), this._disposables = [], this.messages = h(), this._modelId = p(), this._preparing = !1, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.arcgisDiagnosticsChange = o({ bubbles: !1 }), this.arcgisScriptChange = o({ bubbles: !1 });
+    super(...arguments), this._codeEditorElt = p(), this._disposables = [], this.messages = h(), this._modelId = l(), this._preparing = !1, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.arcgisDiagnosticsChange = o({ bubbles: !1 }), this.arcgisScriptChange = o({ bubbles: !1 });
   }
   static {
     this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5 };
   }
   static {
-    this.shadowRootOptions = l;
-  }
-  static {
-    this.styles = [m, _];
+    this.styles = [f];
   }
   async setFocus() {
     await this._codeEditorElt.value?.setFocus();
@@ -35,7 +31,7 @@ class v extends d {
     (i.has("messages") || i.has("profile")) && this._updateDataModelDeps();
   }
   async loaded() {
-    const i = await u();
+    const i = await _();
     this._disposables.push(i.onDiagnosticsChange((e) => !this._preparing && this.arcgisDiagnosticsChange.emit(e.diagnostics)));
   }
   disconnectedCallback() {
@@ -88,10 +84,10 @@ class v extends d {
   }
   render() {
     const i = this._getFeatureSetVariable();
-    return t`<div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><arcgis-code-editor language=arcgis-sql-expression .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} ${f(this._codeEditorElt)}></arcgis-code-editor></div>${!this.hideSideBar && t`<arcgis-editor-variables .variable=${i} .closed=${this._activeAction !== "fields"} class=${r(this._activeAction === "fields" && "code-editor-side-panel flex-panel border-inline-start")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisItemSelected=${this._insertAsText} @arcgisClose=${() => this._setActiveAction(void 0)} data-panel-name=none></arcgis-editor-variables>` || ""}${!this.hideSideBar && t`<arcgis-language-api-panel class=${r(this._activeAction === "functions" && "code-editor-side-panel flex-panel border-inline-start")} .closed=${this._activeAction !== "functions"} @arcgisItemSelected=${this._insertAsSnippet} @arcgisClose=${() => this._setActiveAction(void 0)} .loading=${this._preparing} .apiLibrary=${this._apiLibrary} data-panel-name=none hide-documentation-actions .languageId=${s.languageId}></arcgis-language-api-panel>` || ""}${!this.hideSideBar && t`<calcite-action-bar class="side-action-bar border-inline-start" .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action id=fields-action .text=${this.messages.fields ?? "Fields"} icon=profile-variables .active=${this._activeAction === "fields"} data-panel-name=fields @click=${this._handleActionClick}></calcite-action>${!this.sideActionBarExpanded && t`<calcite-tooltip reference-element=fields-action><span>${this.messages.fields ?? "Fields"}</span></calcite-tooltip>` || ""}<calcite-action id=functions-action .text=${this.messages.functions ?? "Functions"} icon=function .active=${this._activeAction === "functions"} data-panel-name=functions @click=${this._handleActionClick}></calcite-action>${!this.sideActionBarExpanded && t`<calcite-tooltip reference-element=functions-action><span>${this.messages.functions ?? "Functions"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</div>`;
+    return t`<arcgis-code-editor-shell><arcgis-code-editor slot=editor language=arcgis-sql-expression .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} ${g(this._codeEditorElt)}></arcgis-code-editor>${!this.hideSideBar && i && t`<arcgis-editor-variables slot=side-panel .variable=${i} .closed=${this._activeAction !== "fields"} class=${r(this._activeAction === "fields" ? "" : "hidden")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisItemSelected=${this._insertAsText} @arcgisClose=${() => this._setActiveAction(void 0)} data-panel-name=none></arcgis-editor-variables>` || ""}${!this.hideSideBar && t`<arcgis-language-api-panel slot=side-panel class=${r(this._activeAction === "functions" ? "" : "hidden")} .closed=${this._activeAction !== "functions"} @arcgisItemSelected=${this._insertAsSnippet} @arcgisClose=${() => this._setActiveAction(void 0)} .loading=${this._preparing} .apiLibrary=${this._apiLibrary} data-panel-name=none hide-documentation-actions .languageId=${s.languageId}></arcgis-language-api-panel>` || ""}${!this.hideSideBar && t`<calcite-action-bar slot=side-action-bar .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}>${i && t`<calcite-action id=fields-action .text=${this.messages.fields ?? "Fields"} icon=profile-variables .active=${this._activeAction === "fields"} data-panel-name=fields @click=${this._handleActionClick}></calcite-action>` || ""}${i && !this.sideActionBarExpanded && t`<calcite-tooltip reference-element=fields-action><span>${this.messages.fields ?? "Fields"}</span></calcite-tooltip>` || ""}<calcite-action id=functions-action .text=${this.messages.functions ?? "Functions"} icon=function .active=${this._activeAction === "functions"} data-panel-name=functions @click=${this._handleActionClick}></calcite-action>${!this.sideActionBarExpanded && t`<calcite-tooltip reference-element=functions-action><span>${this.messages.functions ?? "Functions"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</arcgis-code-editor-shell>`;
   }
 }
-n("arcgis-sql-expression-editor", v);
+c("arcgis-sql-expression-editor", u);
 export {
-  v as ArcgisSqlExpressionEditor
+  u as ArcgisSqlExpressionEditor
 };

package/dist/components/arcgis-sql-expression-editor/index.d.ts

@@ -1,3 +1,4 @@
+import "../arcgis-code-editor-shell/index.js";
 import "../arcgis-code-editor/index.js";
 import "../arcgis-editor-variables/index.js";
 import "../arcgis-language-api-panel/index.js";

package/dist/components/arcgis-sql-expression-editor/index.js

@@ -1,3 +1,4 @@
+import "../arcgis-code-editor-shell/index.js";
 import "../arcgis-code-editor/index.js";
 import "../arcgis-editor-variables/index.js";
 import "../arcgis-language-api-panel/index.js";

package/dist/components/arcgis-sql-expression-fields/customElement.js

@@ -6,7 +6,7 @@ import { a as m } from "../../chunks/sql-expr-defaults.js";
 import { u as d } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.111 */
+v5.0.0-next.113 */
 const h = r`:host{calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}}`;
 class g extends n {
   constructor() {

package/dist/docs/api.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-01-04T04:35:31",
+  "timestamp": "2026-01-06T04:41:17",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "5.0.0-next.111",
+    "version": "5.0.0-next.113",
     "typescriptVersion": "5.9.3"
   },
   "schemaVersion": "2.1.0",
@@ -32,7 +32,6 @@
             "name": "LitElement",
             "package": "@arcgis/lumina"
           },
-          "encapsulation": "none",
           "pascalCaseName": "ArcgisArcadeEditor",
           "importPath": "components/arcgis-arcade-editor",
           "members": [
@@ -621,7 +620,6 @@
             "name": "LitElement",
             "package": "@arcgis/lumina"
           },
-          "encapsulation": "none",
           "pascalCaseName": "ArcgisCodeEditor",
           "importPath": "components/arcgis-code-editor",
           "members": [
@@ -979,6 +977,130 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/arcgis-code-editor-shell",
+      "sourcePath": "src/components/code-editor-shell/code-editor-shell.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "name": "CodeEditorShell",
+          "tagName": "arcgis-code-editor-shell",
+          "description": "A layout component for code editors that provides slots for an editor, results panel, side panel, and action bars.",
+          "demos": [
+            {
+              "description": "Docs",
+              "url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-editor-shell/"
+            }
+          ],
+          "docsTags": [
+            {
+              "name": "internal"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "@arcgis/lumina"
+          },
+          "pascalCaseName": "ArcgisCodeEditorShell",
+          "importPath": "components/arcgis-code-editor-shell",
+          "members": [
+            {
+              "kind": "method",
+              "name": "componentOnReady",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "module": "lib/lib.es5.d.ts",
+                      "name": "Promise",
+                      "package": "typescript",
+                      "start": 0,
+                      "end": 7
+                    }
+                  ]
+                }
+              },
+              "description": "Create a promise that resolves once component is fully loaded.",
+              "signature": "(): Promise<void>",
+              "inheritedFrom": {
+                "name": "LitElement",
+                "package": "@arcgis/lumina"
+              },
+              "docsTags": [
+                {
+                  "name": "example",
+                  "text": "```js\nconst codeEditorShell = document.querySelector(\"arcgis-code-editor-shell\");\ndocument.body.append(codeEditorShell);\nawait codeEditorShell.componentOnReady();\nconsole.log(\"arcgis-code-editor-shell is ready to go!\");\n```"
+                }
+              ]
+            }
+          ],
+          "slots": [
+            {
+              "name": "top-action-bar",
+              "description": "A slot for placing a top action bar above the editor area."
+            },
+            {
+              "name": "editor",
+              "description": "A slot for placing the main code editor component."
+            },
+            {
+              "name": "results-panel",
+              "description": "A slot for placing a results panel below the code editor."
+            },
+            {
+              "name": "side-panel",
+              "description": "A slot for placing a side panel next to the code editor area."
+            },
+            {
+              "name": "side-action-bar",
+              "description": "A slot for placing a side action bar next to the side panel."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--arcgis-coding-components-border",
+              "description": "The border style for the editor shell *"
+            },
+            {
+              "name": "--arcgis-coding-components-background-color",
+              "description": "The background color for the editor shell *"
+            },
+            {
+              "name": "--arcgis-coding-components-side-action-bar-max-w",
+              "description": "The max width for the side action bar *"
+            },
+            {
+              "name": "--arcgis-coding-components-code-editor-side-panel-w",
+              "description": "The width for the code editor side panel *"
+            },
+            {
+              "name": "--arcgis-coding-components-code-editor-side-panel-max-w",
+              "description": "The max width for the code editor side panel *"
+            },
+            {
+              "name": "--arcgis-coding-components-code-editor-results-panel-max-h",
+              "description": "The max height for the code editor results panel *"
+            },
+            {
+              "name": "--arcgis-coding-components-code-editor-results-panel-h",
+              "description": "The default height for the code editor results panel (preferred over min-h). *"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "arcgis-code-editor-shell",
+          "declaration": {
+            "name": "CodeEditorShell"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/arcgis-code-viewer",
@@ -1146,7 +1268,6 @@
             "name": "LitElement",
             "package": "@arcgis/lumina"
           },
-          "encapsulation": "none",
           "pascalCaseName": "ArcgisSqlExpressionEditor",
           "importPath": "components/arcgis-sql-expression-editor",
           "members": [

package/dist/docs/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-01-04T04:35:31",
+  "timestamp": "2026-01-06T04:41:17",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
-    "version": "5.0.0-next.111",
+    "version": "5.0.0-next.113",
     "typescriptVersion": "5.9.3"
   },
   "components": [
@@ -19,7 +19,7 @@
           "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
         }
       ],
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
@@ -587,7 +587,7 @@
           "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
         }
       ],
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
@@ -948,6 +948,124 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "filePath": "src/components/code-editor-shell/code-editor-shell.tsx",
+      "tag": "arcgis-code-editor-shell",
+      "overview": "",
+      "readme": "",
+      "usage": {},
+      "docs": "A layout component for code editors that provides slots for an editor, results panel, side panel, and action bars.",
+      "docsTags": [
+        {
+          "name": "internal"
+        },
+        {
+          "name": "superclass",
+          "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
+        }
+      ],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [],
+      "methods": [
+        {
+          "name": "componentOnReady",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(): Promise<void>",
+            "parameters": [],
+            "return": "Promise<void>",
+            "references": {
+              "Promise": {
+                "location": "import",
+                "path": "typescript/lib/lib.es5.d.ts",
+                "id": "notImplemented"
+              }
+            }
+          },
+          "signature": "componentOnReady(): Promise<void>",
+          "parameters": [],
+          "docs": "Create a promise that resolves once component is fully loaded.",
+          "docsTags": [
+            {
+              "name": "example",
+              "text": "```js\nconst codeEditorShell = document.querySelector(\"arcgis-code-editor-shell\");\ndocument.body.append(codeEditorShell);\nawait codeEditorShell.componentOnReady();\nconsole.log(\"arcgis-code-editor-shell is ready to go!\");\n```"
+            },
+            {
+              "name": "inheritedFrom",
+              "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
+            }
+          ]
+        }
+      ],
+      "events": [],
+      "styles": [
+        {
+          "name": "--arcgis-coding-components-border",
+          "annotation": "prop",
+          "docs": "The border style for the editor shell *"
+        },
+        {
+          "name": "--arcgis-coding-components-background-color",
+          "annotation": "prop",
+          "docs": "The background color for the editor shell *"
+        },
+        {
+          "name": "--arcgis-coding-components-side-action-bar-max-w",
+          "annotation": "prop",
+          "docs": "The max width for the side action bar *"
+        },
+        {
+          "name": "--arcgis-coding-components-code-editor-side-panel-w",
+          "annotation": "prop",
+          "docs": "The width for the code editor side panel *"
+        },
+        {
+          "name": "--arcgis-coding-components-code-editor-side-panel-max-w",
+          "annotation": "prop",
+          "docs": "The max width for the code editor side panel *"
+        },
+        {
+          "name": "--arcgis-coding-components-code-editor-results-panel-max-h",
+          "annotation": "prop",
+          "docs": "The max height for the code editor results panel *"
+        },
+        {
+          "name": "--arcgis-coding-components-code-editor-results-panel-h",
+          "annotation": "prop",
+          "docs": "The default height for the code editor results panel (preferred over min-h). *"
+        }
+      ],
+      "slots": [
+        {
+          "name": "top-action-bar",
+          "docs": "A slot for placing a top action bar above the editor area."
+        },
+        {
+          "name": "editor",
+          "docs": "A slot for placing the main code editor component."
+        },
+        {
+          "name": "results-panel",
+          "docs": "A slot for placing a results panel below the code editor."
+        },
+        {
+          "name": "side-panel",
+          "docs": "A slot for placing a side panel next to the code editor area."
+        },
+        {
+          "name": "side-action-bar",
+          "docs": "A slot for placing a side action bar next to the side panel."
+        }
+      ],
+      "parts": [],
+      "listeners": []
+    },
     {
       "filePath": "src/components/code-viewer/code-viewer.tsx",
       "tag": "arcgis-code-viewer",
@@ -1078,7 +1196,7 @@
           "text": "{\"name\":\"LitElement\",\"package\":\"@arcgis/lumina\"}"
         }
       ],
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},

package/dist/docs/vscode.css-custom-data.json

@@ -1,6 +1,35 @@
 {
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
-  "properties": [],
+  "properties": [
+    {
+      "name": "--arcgis-coding-components-border",
+      "description": "The border style for the editor shell *"
+    },
+    {
+      "name": "--arcgis-coding-components-background-color",
+      "description": "The background color for the editor shell *"
+    },
+    {
+      "name": "--arcgis-coding-components-side-action-bar-max-w",
+      "description": "The max width for the side action bar *"
+    },
+    {
+      "name": "--arcgis-coding-components-code-editor-side-panel-w",
+      "description": "The width for the code editor side panel *"
+    },
+    {
+      "name": "--arcgis-coding-components-code-editor-side-panel-max-w",
+      "description": "The max width for the code editor side panel *"
+    },
+    {
+      "name": "--arcgis-coding-components-code-editor-results-panel-max-h",
+      "description": "The max height for the code editor results panel *"
+    },
+    {
+      "name": "--arcgis-coding-components-code-editor-results-panel-h",
+      "description": "The default height for the code editor results panel (preferred over min-h). *"
+    }
+  ],
   "pseudoElements": []
 }

package/dist/docs/vscode.html-custom-data.json

@@ -60,6 +60,17 @@
         }
       ]
     },
+    {
+      "name": "arcgis-code-editor-shell",
+      "description": "A layout component for code editors that provides slots for an editor, results panel, side panel, and action bars.\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- **top-action-bar** - A slot for placing a top action bar above the editor area.\n- **editor** - A slot for placing the main code editor component.\n- **results-panel** - A slot for placing a results panel below the code editor.\n- **side-panel** - A slot for placing a side panel next to the code editor area.\n- **side-action-bar** - A slot for placing a side action bar next to the side panel.\n\n### CSS Properties\n- **--arcgis-coding-components-border** - The border style for the editor shell * \n- **--arcgis-coding-components-background-color** - The background color for the editor shell * \n- **--arcgis-coding-components-side-action-bar-max-w** - The max width for the side action bar * \n- **--arcgis-coding-components-code-editor-side-panel-w** - The width for the code editor side panel * \n- **--arcgis-coding-components-code-editor-side-panel-max-w** - The max width for the code editor side panel * \n- **--arcgis-coding-components-code-editor-results-panel-max-h** - The max height for the code editor results panel * \n- **--arcgis-coding-components-code-editor-results-panel-h** - The default height for the code editor results panel (preferred over min-h). * ",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://developers.arcgis.com/javascript/latest/references/coding-components/arcgis-code-editor-shell/"
+        }
+      ]
+    },
     {
       "name": "arcgis-code-viewer",
       "description": "A code viewer component for displaying code snippets.\nSupports syntax highlighting for various programming languages, include arcade and arcgis-sql-expression.\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.",