@esri/solutions-components 1.2.0-next.2 → 1.2.0-next.21

package/dist/components/solution-details-panel/customElement.js

@@ -1,18 +1,18 @@
-import { c as w } from "../../chunks/runtime.js";
-import { css as y, html as s } from "lit";
-import { u as b } from "../../chunks/useT9n.js";
+import { c as b } from "../../chunks/runtime.js";
+import { css as x, html as s } from "lit";
+import { u as w } from "../../chunks/useT9n.js";
 import { createRef as c, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as x, createEvent as u, safeClassMap as p, nothing as m, safeStyleMap as $ } from "@arcgis/lumina";
+import { LitElement as y, createEvent as u, safeClassMap as p, nothing as m, safeStyleMap as $ } from "@arcgis/lumina";
 import { useContextConsumer as f } from "@arcgis/lumina/context";
 import { a as R, u as k } from "../../chunks/deployAppContexts.js";
-import { getItemDataAsJson as A, getItem as L, getPropWithDefault as _, getProp as g, setCreateProp as M } from "@esri/solution-common";
-import { a as S, b as I } from "../../chunks/privilegeUtils.js";
-import { _findExistingItem as E } from "@esri/solution-deployer";
-import { g as C, a as P } from "../../chunks/common.js";
+import { sanitizeHTML as M, getItemDataAsJson as L, getItem as S, getPropWithDefault as _, getProp as g, setCreateProp as I } from "@esri/solution-common";
+import { a as A, b as E } from "../../chunks/privilegeUtils.js";
+import { _findExistingItem as C } from "@esri/solution-deployer";
+import { g as P, a as T } from "../../chunks/common.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
-const T = y`/** @license
+v1.2.0-next.21 */
+const D = x`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,13 +26,13 @@ const T = y`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */.display-flex{display:flex}.flex-direction-row{flex-direction:row}.flex-direction-column{flex-direction:column}.cursor-default{cursor:default}.border-bottom{border-bottom-color:var(--calcite-color-border-1);border-bottom-width:1px;border-bottom-style:solid}ul{list-style-type:disc;margin-block-start:0px;margin-block-end:0px}calcite-label{--calcite-label-margin-bottom: 0px}.padding-1{padding:1rem}.padding-1-5{padding:1.5rem}.padding-2px{padding:2px}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-5{padding-bottom:1.5rem}.padding-top-1{padding-top:1rem}.padding-top-1-5{padding-top:1.5rem}.padding-top-1-2{padding-top:.5rem}.padding-end-1{padding-inline-end:1rem}.padding-end-2{padding-inline-end:2rem}.padding-start-1{padding-inline-start:1rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-1-5{margin-bottom:1.5rem}.margin-end-1{margin-inline-end:1rem}.margin-block-start-end-0{margin-block-start:0px;margin-block-end:0px}.align-self-center{align-self:center;padding:5px;--calcite-fab-shadow: #FFFFFF00}.align-items-center{align-items:center}.button-width{width:260px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.button-width{width:auto}}.image-width{width:395px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}.width-full{width:100%}.card-group{overflow:hidden}calcite-card{width:450px}@media(max-width:1496px){calcite-card{width:calc(100% / 3 - .5rem)}}@media(max-width:1100px){calcite-card{width:calc(50% - .5rem)}}@media(max-width:550px){calcite-card{width:100%}}.max-height-300{max-height:300px}.display-none{display:none}.cursor-pointer{cursor:pointer}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{border:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer;padding:2px}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%;font-size:1.2rem}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}.margin-inline-unset{margin-inline:unset}.margin-top-0-5{margin-top:.5rem}.margin-top-0{margin-top:0}.collapsible-div{overflow:hidden;transition:max-height .3s ease-in-out}.collapsible-div.expanded{max-height:100%}.back-color-override{--calcite-panel-background-color: var(--calcite-color-foreground-2)}.back-color-override-1{background-color:var(--calcite-color-foreground-1)}.title-font{font-size:2rem;line-height:1.1;color:var(--calcite-color-text-1)}.line-height-1-5{line-height:1.5}.font-1rem{font-size:1rem}.font-color-1{color:var(--calcite-color-text-1)}h1{font-weight:unset;margin:0;padding:0}.item-padding{--calcite-internal-accordion-item-padding: 1.5rem}.accordion-bg{--calcite-accordion-background-color: var(--calcite-color-foreground-1)}`;
-class D extends x {
+ */.display-flex{display:flex}.flex-direction-row{flex-direction:row}.flex-direction-column{flex-direction:column}.cursor-default{cursor:default}.border-bottom{border-bottom-color:var(--calcite-color-border-1);border-bottom-width:var(--calcite-spacing-px);border-bottom-style:solid}ul{list-style-type:disc;margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}ul ul{list-style-type:circle}li{margin:var(--calcite-spacing-sm) var(--calcite-spacing-none)}calcite-label{--calcite-label-margin-bottom: var(--calcite-spacing-none)}.padding-1{padding:var(--calcite-spacing-lg)}.padding-1-5{padding:var(--calcite-spacing-xl)}.padding-2px{padding:var(--calcite-spacing-base)}.padding-bottom-1{padding-bottom:var(--calcite-spacing-lg)}.padding-bottom-1-5{padding-bottom:var(--calcite-spacing-xxl)}.padding-top-1{padding-top:var(--calcite-spacing-lg)}.padding-top-1-5{padding-top:var(--calcite-spacing-xxl)}.padding-top-1-2{padding-top:var(--calcite-spacing-sm)}.padding-end-1{padding-inline-end:var(--calcite-spacing-lg)}.padding-end-2{padding-inline-end:var(--calcite-spacing-xxxl)}.padding-start-1{padding-inline-start:var(--calcite-spacing-lg)}.margin-bottom-1{margin-bottom:var(--calcite-spacing-lg)}.margin-bottom-1-5{margin-bottom:var(--calcite-spacing-xxl)}.margin-end-1{margin-inline-end:var(--calcite-spacing-lg)}.margin-top-0{margin-top:var(--calcite-spacing-none)}.margin-top-1{margin-top:var(--calcite-spacing-lg)}.margin-sides-0-5{margin-left:var(--calcite-spacing-sm);margin-right:var(--calcite-spacing-sm)}.margin-block-start-end-0{margin-block-start:var(--calcite-spacing-none);margin-block-end:var(--calcite-spacing-none)}.align-self-center{align-self:center;padding:5px;--calcite-fab-shadow: #FFFFFF00}.align-items-center{align-items:center}.align-items-baseline{align-items:baseline}.button-width{width:260px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.button-width{width:auto}}.image-width{width:395px;flex-grow:0;flex-shrink:0}@media(max-width:1280px){.image-width{flex-grow:2;flex-shrink:.5}}.width-full{width:100%}.card-group{overflow:hidden}calcite-card{width:450px}@media(max-width:1496px){calcite-card{width:calc(100% / 3 - .5rem)}}@media(max-width:1100px){calcite-card{width:calc(50% - .5rem)}}@media(max-width:550px){calcite-card{width:100%}}.max-height-300{max-height:300px}.display-none{display:none}.cursor-pointer{cursor:pointer}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{border:var(--calcite-spacing-base) solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer;padding:var(--calcite-spacing-base)}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%;font-size:var(--calcite-spacing-xl)}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}.margin-inline-unset{margin-inline:unset}.collapsible-div{overflow:hidden;transition:max-height .3s ease-in-out}.collapsible-div.expanded{max-height:100%}.back-color-override{--calcite-panel-background-color: var(--calcite-color-foreground-2)}.back-color-override-1{background-color:var(--calcite-color-foreground-1)}.title-font{font-size:1.8rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.heading-font{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium)}.line-height-xxl{line-height:var(--calcite-spacing-xxl)}.font-1{font-size:var(--calcite-spacing-lg)}.font-color-1{color:var(--calcite-color-text-1)}h1{font-weight:unset;margin:var(--calcite-spacing-none);padding:var(--calcite-spacing-none)}.item-padding{--calcite-internal-accordion-item-padding: var(--calcite-spacing-xl)}.accordion-bg{--calcite-accordion-background-color: var(--calcite-color-foreground-1)}.release-notes-table-cell{display:flex;flex-direction:row;font-size:var(--calcite-spacing-lg);color:var(--calcite-color-text-1)}calcite-table-header{--calcite-internal-table-cell-font-size: var(--calcite-font-size-md);--calcite-font-weight-medium: var(--calcite-font-weight-semibold)}`;
+class O extends y {
   constructor() {
-    super(), this._showScreenshotsShowMore = !1, this._showYouMayAlsoLikeShowMore = !1, this._isScreenshotsRowExpanded = !1, this._isYouMayAlsoLikeRowExpanded = !1, this._screenshotsRowBaseHeight = 340, this._templates = [], this._translations = b({ name: "solution-details-panel", blocking: !0 }), this._youMayAlsoLikeBaseHeight = 340, this._allCards = [], this._authContextConsumer = f({
+    super(), this._showScreenshotsShowMore = !1, this._showYouMayAlsoLikeShowMore = !1, this._isScreenshotsRowExpanded = !1, this._isYouMayAlsoLikeRowExpanded = !1, this._screenshotsRowBaseHeight = 340, this._templates = [], this._translations = w({ name: "solution-details-panel", blocking: !0 }), this._youMayAlsoLikeBaseHeight = 340, this._allCards = [], this._authContextConsumer = f({
       context: R,
       subscribe: !0
-    }), this._configureLearnMore = "", this._customDeploymentMappings = {}, this._deployDialogRef = c(), this._deployingDialogRef = c(), this._overviewAccordionItemElement = c(), this._privilegePopoverRef = c(), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._releaseNotesAccordionItemElement = c(), this._relatedArticlesAccordionItemElement = c(), this._screenshotsAccordionItemElement = c(), this._screenshotsDialogRef = c(), this._screenshotsElement = c(), this._termsOfUseAccordionItemElement = c(), this._userOptions = [], this._userSessionContextConsumer = f({
+    }), this._configureLearnMore = "", this._customDeploymentMappings = {}, this._deployDialogRef = c(), this._deployingDialogRef = c(), this._overviewAccordionItemElement = c(), this._privilegePopoverRef = c(), this._privileges = [], this._regexFsUrl = "https?:\\/\\/.+FeatureServer\\b", this._regexID = "\\b[0-9A-F]{32}\\b", this._releaseNotesAccordionItemElement = c(), this._relatedResourcesAccordionItemElement = c(), this._screenshotsAccordionItemElement = c(), this._screenshotsDialogRef = c(), this._screenshotsElement = c(), this._termsOfUseAccordionItemElement = c(), this._userOptions = [], this._userSessionContextConsumer = f({
       context: k,
       subscribe: !0
     }), this._youMayAlsoLikeAccordionItemElement = c(), this._youMayAlsoLikeElement = c(), this.templatesFetched = u(), this.itemPropertiesFetched = u(), this.sortTypeChanged = u(), this.tokenRefreshed = u(), this.listenOn(window, "detailsCardSelected", this._detailsCardSelected), this.listenOn(window, "allCardsFetched", this._allCardsFetched), this.listenOn(window, "deployAppTabSelected", this._handleDeployAppTabSelected);
@@ -41,7 +41,7 @@ class D extends x {
     this.properties = { card: 0, _showScreenshotsShowMore: 16, _showYouMayAlsoLikeShowMore: 16, _isScreenshotsRowExpanded: 16, _isYouMayAlsoLikeRowExpanded: 16, _itemProperties: 16, _missingPrivilegeMessages: 16, _screenshotsRowBaseHeight: 16, _templates: 16, _translations: 16, _youMayAlsoLikeBaseHeight: 16 };
   }
   static {
-    this.styles = T;
+    this.styles = D;
   }
   async connectedCallback() {
     super.connectedCallback(), this.listenOn(window, "calciteTabChange", this._cleanupPanel), this.listenOn(window, "detailsCardSelected", this._cleanupPanel);
@@ -55,35 +55,34 @@ class D extends x {
     super.disconnectedCallback(), this._resizeObserver?.disconnect();
   }
   render() {
-    const e = "padding-bottom-1-5", t = this._getRelatedArticles(), i = this._getYouMayAlsoLikeCards();
-    return s`<h1><calcite-panel class="back-color-override padding-top-1"><div class=${`${e} padding-1-5 back-color-override-1 margin-bottom-1-5`} id=solution-details-row>${this._getSolutionRow()}</div><div class=${p(e)}>${this._getScreenshotsRow()}</div><div class=${p(e)}>${this._getOverviewRow()}</div><div class=${p(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? s`<div class=${p(e)}>${this._getRelatedArticlesRow(t)}</div>` : ""}${i.length > 0 ? s`<div class=${p(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}<div class=${p(e)}>${this._getTermsOfUseRow()}</div><solution-deploy-dialog .card=${this.card} @deployFailed=${this._closeDialogs} @deployProgressEnd=${this._closeDialogs} @deployProgressStart=${this._deployProgressStart} @deployProgressUpdated=${this._deployProgessUpdated} id=solutionDeployDialog .userOptions=${this._userOptions} ${d(this._deployDialogRef)}></solution-deploy-dialog><solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${d(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} ${d(this._deployingDialogRef)}></solution-deploying-dialog></calcite-panel></h1>`;
+    const e = "padding-bottom-1-5", t = this._getRelatedResources(), i = this._getYouMayAlsoLikeCards();
+    return s`<h1><calcite-panel class="back-color-override padding-top-1"><div class=${`${e} padding-1-5 back-color-override-1 margin-bottom-1-5`} id=solution-details-row>${this._getSolutionRow()}</div><div class=${p(e)}>${this._getScreenshotsRow()}</div><div class=${p(e)}>${this._getOverviewRow()}</div><div class=${p(e)}>${this._getReleaseNotesRow()}</div>${t.length > 0 ? s`<div class=${p(e)}>${this._getRelatedResourcesRow(t)}</div>` : ""}${i.length > 0 ? s`<div class=${p(e)}>${this._getYouMayAlsoLikeRow(i)}</div>` : ""}<div class=${p(e)}>${this._getTermsOfUseRow()}</div><solution-deploy-dialog .card=${this.card} @deployFailed=${this._closeDialogs} @deployProgressEnd=${this._closeDialogs} @deployProgressStart=${this._deployProgressStart} @deployProgressUpdated=${this._deployProgessUpdated} id=solutionDeployDialog .userOptions=${this._userOptions} ${d(this._deployDialogRef)}></solution-deploy-dialog><solution-snapshot-gallery .card=${this.card} id=solutionSnapshotGallery .itemProperties=${this._itemProperties} ${d(this._screenshotsDialogRef)}></solution-snapshot-gallery><solution-deploying-dialog .card=${this.card} ${d(this._deployingDialogRef)}></solution-deploying-dialog></calcite-panel></h1>`;
   }
   updated() {
     setTimeout(() => {
       const e = this._getYouMayAlsoLikeCards();
       let t = 340;
       for (let i = 0; i < e.length; i++) {
-        const o = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`), a = o?.offsetHeight ? o.offsetHeight + 40 : 0;
-        a > t && (t = a);
+        const a = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`), o = a?.offsetHeight ? a.offsetHeight + 40 : 0;
+        o > t && (t = o);
       }
       this._youMayAlsoLikeBaseHeight = t, this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;
     }, 100);
   }
   _getSolutionRow() {
-    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._missingPrivilegeMessages?.leadingMessages || [], i = t.length > 0, o = this._missingPrivilegeMessages?.bulletedMessages || [], a = o.length > 0, l = this._missingPrivilegeMessages?.trailingMessages || [], r = l.length > 0;
-    return s`<div class="display-flex flex-direction-row"><div class="padding-end-2 image-width"><img alt=${this.card?.title ?? m} src=${e ?? m}></div><div class="display-flex flex-direction-row">${this._getTextSection(i, a, r, t, o, l)}${this._getButtons(i || a || r)}</div></div>`;
+    const e = this.card?.thumbnailUrl.replace(/w=\d+/, "w=400"), t = this._missingPrivilegeMessages?.leadingMessages || [], i = t.length > 0, a = this._missingPrivilegeMessages?.bulletedMessages || [], o = a.length > 0, l = this._missingPrivilegeMessages?.trailingMessages || [], r = l.length > 0;
+    return s`<div class="display-flex flex-direction-row"><div class="padding-end-2 image-width"><img alt=${this.card?.title ?? m} src=${e ?? m}></div><div class="display-flex flex-direction-row">${this._getTextSection(i, o, r, t, a, l)}${this._getButtons(i || o || r || !this._authContextConsumer.value?.IsSignedIn, this._authContextConsumer.value?.IsEnterprisePortal)}</div></div>`;
   }
-  _getTextSection(e, t, i, o, a, l) {
-    return s`<div class="display-flex flex-direction-column padding-end-1"><h2 class="padding-end-1 padding-top-1 title-font margin-top-0">${this.card?.title}</h2>${this.card?.categories?.some((r) => r.includes("New Release")) && s`<calcite-chip class="align-self-center" kind=brand .label=${this._translations.new} scale=m>${this._translations.new}</calcite-chip>` || ""}<calcite-label scale=l class="font-1rem padding-end-1">${this.card?.snippet}</calcite-label>${e || t || i ? s`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(o, a, l)}</div>` : ""}</div>`;
+  _getTextSection(e, t, i, a, o, l) {
+    return s`<div class="display-flex flex-direction-column padding-end-1"><div class="display-flex flex-direction-row align-items-baseline"><h2 class="padding-top-1 title-font margin-top-0 margin-bottom-1-5">${this.card?.title}</h2>${this.card?.categories?.some((r) => r.includes("New Release")) && s`<calcite-chip class="margin-top-1 margin-bottom-1-5 margin-sides-0-5" kind=brand .label=${this._translations.new} scale=m icon=mega-phone>${this._translations.new}</calcite-chip>` || ""}</div><calcite-label scale=l class="font-1 padding-end-1">${this.card?.snippet}</calcite-label>${e || t || i ? s`<div class="display-flex flex-direction-row padding-top-1">${this._getMissingPrivilegesNotice(a, o, l)}</div>` : ""}</div>`;
   }
-  _getButtons(e) {
-    console.warn("TODO update learn more string after release");
-    const t = this._itemProperties?.demoURL || "", i = t ? "" : "display-none";
-    return s`<div class="display-flex flex-direction-column button-width"><calcite-button class="padding-bottom-1" .disabled=${e} icon-end=arrow-bold-right icon-flip-rtl=end @click=${() => this._openDeploy()} scale=l>${this._translations.deploy}</calcite-button><calcite-button appearance=outline-fill kind=neutral class=${`padding-bottom-1 ${i}`} @click=${() => this._openUrl(t)} scale=l>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1" @click=${() => this._openUrl(this.card?.learnMoreUrl || "")} scale=l>Learn more</calcite-button><solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=l></solution-social-share></div>`;
+  _getButtons(e, t) {
+    const i = this._itemProperties?.demoURL || "", a = i ? "" : "display-none";
+    return s`<div class="display-flex flex-direction-column button-width"><calcite-button class="padding-bottom-1" .disabled=${e} icon-end=arrow-bold-right icon-flip-rtl=end @click=${() => this._openDeploy()} scale=l>${this._translations.deploy}</calcite-button><calcite-button appearance=outline-fill kind=neutral class=${`padding-bottom-1 ${a}`} @click=${() => this._openUrl(i)} scale=l>${this._translations.watchDemo}</calcite-button><calcite-button appearance=outline-fill kind=neutral class="padding-bottom-1" @click=${() => this._openUrl(this.card?.learnMoreUrl || "")} scale=l>${this._translations.learnMore}</calcite-button>${!t && s`<solution-social-share button-appearance=outline-fill class="padding-bottom-1" share-button-kind=neutral .shareButtonText=${this._translations.share} share-button-scale=l></solution-social-share>` || ""}</div>`;
   }
   _getMissingPrivilegesNotice(e, t, i) {
-    const o = "solutions-missing-privileges-notice", a = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;
-    return s`<div><calcite-notice class="margin-inline-unset" kind=warning open><div slot=message>${`${a}`}</div><calcite-action icon=information id=${o} slot=actions-end .text=${a}></calcite-action></calcite-notice><calcite-popover closable .label=${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading} overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${d(this._privilegePopoverRef)}><div class="padding-1 display-flex flex-direction-column"><span class="padding-bottom-1">${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}</span>${// Leading messages
+    const a = "solutions-missing-privileges-notice", o = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;
+    return s`<div><calcite-notice class="margin-inline-unset" kind=warning open><div slot=message>${`${o}`}</div><calcite-action icon=information id=${a} slot=actions-end .text=${o}></calcite-action></calcite-notice><calcite-popover closable .label=${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading} overlay-positioning=fixed placement=bottom reference-element=solutions-missing-privileges-notice ${d(this._privilegePopoverRef)}><div class="padding-1 display-flex flex-direction-column"><span class="padding-bottom-1">${this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}</span>${// Leading messages
     this._getSpanMessages(e, "padding-bottom-1")}${// Bulleted messages
     this._getBulletedMessages(t)}${// Trailing messages
     this._getSpanMessages(i, "padding-top-1")}</div></calcite-popover></div>`;
@@ -96,60 +95,63 @@ class D extends x {
   }
   _getScreenshotsRow() {
     const e = this._isScreenshotsRowExpanded ? this._translations.showLess : this._translations.showMore, t = this._isScreenshotsRowExpanded ? "arrow-up" : "arrow-down", i = this._showScreenshotsShowMore ? "" : "display-none";
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._screenshotsAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.screenshots}</h3><calcite-panel><div class="display-flex flex-direction-column back-color-override-1"><div class="collapsible-div max-height-300" id=screenshots-subsection ${d(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${i}`} .icon=${t} kind=neutral @click=${() => {
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._screenshotsAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.screenshots}</div><calcite-panel><div class="display-flex flex-direction-column back-color-override-1"><div class="collapsible-div max-height-300" id=screenshots-subsection ${d(this._screenshotsElement)}>${this._getScreenshots()}</div><calcite-fab appearance=outline-fill class=${`align-self-center ${i}`} .icon=${t} kind=neutral @click=${() => {
       this._screenshotsElement.value?.classList.toggle("expanded"), this._isScreenshotsRowExpanded = this._screenshotsElement.value.classList.contains("expanded");
     }} .text=${e} text-enabled></calcite-fab></div></calcite-panel></calcite-accordion-item></calcite-accordion>`;
   }
   _getScreenshots() {
     const e = this._itemProperties?.preview || [];
-    return s`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${e.map((t) => this.card?.id ? s`<calcite-card class="cursor-pointer" .label=${t.alt} @click=${() => this._openScreenshotGallery(t)}><div class="card-image-wrap" slot=thumbnail><img alt=${t.alt ?? m} class="thumbnail card-image" slot=thumbnail src=${C(this.card.id || "", t.name, this._authContextConsumer.value) ?? m}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>` : "")}</calcite-card-group>`;
+    return s`<calcite-card-group class="card-group" .label=${this._translations.screenshots}>${e.map((t) => this.card?.id ? s`<calcite-card class="cursor-pointer" .label=${t.alt} @click=${() => this._openScreenshotGallery(t)}><div class="card-image-wrap" slot=thumbnail><img alt=${t.alt ?? m} class="thumbnail card-image" slot=thumbnail src=${P(this.card.id || "", t.name, this._authContextConsumer.value) ?? m}><div class="hover-text">${this._translations.openInGallery}</div></div></calcite-card>` : "")}</calcite-card-group>`;
   }
   _openScreenshotGallery(e) {
     const t = this._screenshotsDialogRef.value;
     t && (t.screenshot = e, t.open = !0);
   }
   _getOverviewRow() {
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._overviewAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.solutionOverview}</h3>${this._getDescriptionRow()}${this._getRequirementsRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._overviewAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.solutionOverview}</div>${this._getDescriptionRow()}${this._getRequirementsRow()}${this._getInformationProductsRow()}</calcite-accordion-item></calcite-accordion>`;
   }
   _getDescriptionRow() {
-    return s`<div class="display-flex flex-direction-column"><p class="font-color-1 font-1rem margin-top-0 line-height-1-5" .innerHTML=${this.card?.description ?? ""}></p></div>`;
+    return s`<div class="display-flex flex-direction-column"><p class="font-color-1 font-1 margin-top-0 line-height-xxl" .innerHTML=${this.card?.description ?? ""}></p></div>`;
   }
   _getRequirementsRow() {
     const e = this._getRequirements();
-    return s`<div class="display-flex flex-direction-column font-1rem font-color-1"><p>${this.card?.title ? this._translations.requirementsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</p>${e.map((t) => s`<ul class="display-flex flex-direction-row padding-top-1-2 font-1rem font-color-1"><li>${t}</li></ul>`)}</div>`;
+    return s`<div class="display-flex flex-direction-column font-1 font-color-1"><p>${this.card?.title ? this._translations.requirementsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</p>${e.length > 0 && s`<ul class="padding-top-1-2 font-1 font-color-1">${e.map((t) => s`<li>${t}</li>`)}</ul>` || ""}</div>`;
   }
   _getRequirements() {
     return this._itemProperties?.requirements || [];
   }
   _getInformationProductsRow() {
-    return s`<div class="display-flex flex-direction-column padding-top-1-5 font-1rem line-height-1-5 font-color-1"><span>${this.card?.title ? this._translations.informationProductsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</span><calcite-table bordered caption class="padding-top-1">${this._getInformationTableHeaderRow()}${this._getInformationTableRows()}</calcite-table><p>${this._translations.informationProductsFooterText}</p></div>`;
+    return s`<div class="display-flex flex-direction-column padding-top-1-5 font-1 line-height-xxl font-color-1"><span>${this.card?.title ? this._translations.informationProductsSubText.replace("{{solutionTitle}}", this.card.title) : ""}</span><calcite-table bordered caption class="padding-top-1">${this._getInformationTableHeaderRow()}${this._getInformationTableRows()}</calcite-table><p>${this._translations.informationProductsFooterText}</p></div>`;
   }
   _getInformationTableHeaderRow() {
     return s`<calcite-table-row slot=table-header><calcite-table-header .heading=${this._translations.item}></calcite-table-header><calcite-table-header .heading=${this._translations.description}></calcite-table-header><calcite-table-header .heading=${this._translations.minimumUserType}></calcite-table-header></calcite-table-row>`;
   }
   _getInformationTableRows() {
-    return (this._itemProperties?.infoProducts || []).map((t) => s`<calcite-table-row><calcite-table-cell><p class="display-flex flex-direction-row font-1rem font-color-1">${t.item}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1rem font-color-1">${t.description}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1rem font-color-1">${t.userType}</p></calcite-table-cell></calcite-table-row>`);
+    return (this._itemProperties?.infoProducts || []).map((t) => s`<calcite-table-row><calcite-table-cell><p class="display-flex flex-direction-row font-1 font-color-1">${t.item}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1 font-color-1">${t.description}</p></calcite-table-cell><calcite-table-cell><p class="display-flex flex-direction-row font-1 font-color-1">${t.userType}</p></calcite-table-cell></calcite-table-row>`);
   }
   _getReleaseNotesRow() {
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._releaseNotesAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.releaseNotes}</h3><div class="display-flex flex-direction-column"><calcite-table bordered caption>${this._getReleaseNotesTableHeaderRow()}${this._getReleaseNotesTableRows()}</calcite-table></div></calcite-accordion-item></calcite-accordion>`;
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._releaseNotesAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.releaseNotes}</div><div class="display-flex flex-direction-column"><calcite-table bordered caption>${this._getReleaseNotesTableHeaderRow()}${this._getReleaseNotesTableRows()}</calcite-table></div></calcite-accordion-item></calcite-accordion>`;
   }
   _getReleaseNotesTableHeaderRow() {
     return s`<calcite-table-row slot=table-header><calcite-table-header .heading=${this._translations.version}></calcite-table-header><calcite-table-header .heading=${this._translations.description}></calcite-table-header></calcite-table-row>`;
   }
   _getReleaseNotesTableRows() {
-    return (this._itemProperties?.releaseNotes || [])?.map((t) => s`<calcite-table-row><calcite-table-cell><p class="display-flex flex-direction-row font-1rem font-color-1">${t.version}</p></calcite-table-cell><calcite-table-cell alignment=start>${t.description.map((i) => s`<ul class="display-flex flex-direction-row font-1rem font-color-1"><li>${i.note}</li></ul>`)}</calcite-table-cell></calcite-table-row>`);
+    return (this._itemProperties?.releaseNotes || [])?.map((t) => {
+      const i = M(t.description);
+      return s`<calcite-table-row><calcite-table-cell><p class="release-notes-table-cell">${t.version}</p></calcite-table-cell><calcite-table-cell><p class="release-notes-table-cell" .innerHTML=${i ?? ""}></p></calcite-table-cell></calcite-table-row>`;
+    });
   }
-  _getRelatedArticlesRow(e) {
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._relatedArticlesAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.relatedArticles}</h3><div class="display-flex flex-direction-row">${e.map((t) => {
-      console.log(t), s`<solution-article-card></solution-article-card>`;
+  _getRelatedResourcesRow(e) {
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._relatedResourcesAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.relatedResources}</div><div class="display-flex flex-direction-row">${e.map((t) => {
+      console.log(t), s`<solution-resource-card></solution-resource-card>`;
     })}</div></calcite-accordion-item></calcite-accordion>`;
   }
-  _getRelatedArticles() {
+  _getRelatedResources() {
     return [];
   }
   _getYouMayAlsoLikeRow(e) {
-    const t = this._showYouMayAlsoLikeShowMore ? "" : "display-none", i = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore, o = this._isYouMayAlsoLikeRowExpanded ? "arrow-up" : "arrow-down", a = this._isYouMayAlsoLikeRowExpanded ? "" : { height: `${this._youMayAlsoLikeBaseHeight}px` };
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._youMayAlsoLikeAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>${this._translations.youMayAlsoLike}</h3><div class="display-flex flex-direction-column"><div class="collapsible-div" id=you-may-also-like-subsection style=${$(a)} ${d(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((l, r) => s`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${l} class="padding-2px"></solution-details-card>`)}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${t}`} .icon=${o} kind=inverse @click=${() => {
+    const t = this._showYouMayAlsoLikeShowMore ? "" : "display-none", i = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore, a = this._isYouMayAlsoLikeRowExpanded ? "arrow-up" : "arrow-down", o = this._isYouMayAlsoLikeRowExpanded ? "" : { height: `${this._youMayAlsoLikeBaseHeight}px` };
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._youMayAlsoLikeAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>${this._translations.youMayAlsoLike}</div><div class="display-flex flex-direction-column"><div class="collapsible-div" id=you-may-also-like-subsection style=${$(o)} ${d(this._youMayAlsoLikeElement)}><div class="display-flex flex-direction-row"><calcite-card-group class="card-group" .label=${this._translations.youMayAlsoLike}>${e.map((l, r) => s`<solution-details-card .id=${`you-may-also-like-${r}`} .card=${l} class="padding-2px"></solution-details-card>`)}</calcite-card-group></div></div><calcite-fab appearance=outline-fill class=${`align-self-center ${t}`} .icon=${a} kind=inverse @click=${() => {
       this._youMayAlsoLikeElement.value?.classList.toggle("expanded"), this._isYouMayAlsoLikeRowExpanded = this._youMayAlsoLikeElement.value.classList.contains("expanded");
     }} .text=${i} text-enabled></calcite-fab></div></calcite-accordion-item></calcite-accordion>`;
   }
@@ -158,9 +160,7 @@ class D extends x {
     return this._allCards.filter((t) => e.indexOf(t.deployCommonId) > -1);
   }
   _getTermsOfUseRow() {
-    console.warn("TODO update string after release");
-    const e = "Copyright 2025 Esri", t = 'Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at', i = "http://www.apache.org/licenses/LICENSE-2.0";
-    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._termsOfUseAccordionItemElement)}><h3 class="margin-block-start-end-0" slot=content-start>Terms of Use</h3><div class="display-flex flex-direction-column"><p class="font-color-1 font-1rem margin-top-0 line-height-1-5" .innerHTML=${e}></p><p class="font-color-1 font-1rem margin-top-0 line-height-1-5" .innerHTML=${t}></p><calcite-link class="margin-top-0 line-height-1-5" .href=${i}>${i}</calcite-link><p class="font-color-1 font-1rem margin-top-1 line-height-1-5" .innerHTML=${'Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.'}></p></div></calcite-accordion-item></calcite-accordion>`;
+    return s`<calcite-accordion class="accordion-bg " icon-position=start scale=l appearance=transparent><calcite-accordion-item class="item-padding" expanded ${d(this._termsOfUseAccordionItemElement)}><div class="margin-block-start-end-0 heading-font" slot=content-start>Terms of Use</div><div class="display-flex flex-direction-column"><p class="font-color-1 font-1 margin-top-0 line-height-xxl" .innerHTML=${this._translations.copyrightHeading ?? ""}></p><p class="font-color-1 font-1 margin-top-0 line-height-xxl" .innerHTML=${this._translations.apacheLicense ?? ""}></p><calcite-link class="margin-top-0 line-height-xxl" .href=${this._translations.apacheLicenseUrl}>${this._translations.apacheLicenseUrl}</calcite-link><p class="font-color-1 font-1 margin-top-1 line-height-xxl" .innerHTML=${this._translations.asIsBasis ?? ""}></p></div></calcite-accordion-item></calcite-accordion>`;
   }
   _openDeploy() {
     if (this._authContextConsumer.value.IsSignedIn) {
@@ -176,27 +176,27 @@ class D extends x {
     this.card = e.detail, this._onResize(), this._missingPrivilegeMessages = void 0, await this._getItemData(), this._expandAccordions();
   }
   _expandAccordions() {
-    this._overviewAccordionItemElement.value && (this._overviewAccordionItemElement.value.expanded = !0), this._releaseNotesAccordionItemElement.value && (this._releaseNotesAccordionItemElement.value.expanded = !0), this._relatedArticlesAccordionItemElement.value && (this._relatedArticlesAccordionItemElement.value.expanded = !0), this._screenshotsAccordionItemElement.value && (this._screenshotsAccordionItemElement.value.expanded = !0), this._termsOfUseAccordionItemElement.value && (this._termsOfUseAccordionItemElement.value.expanded = !0), this._youMayAlsoLikeAccordionItemElement.value && (this._youMayAlsoLikeAccordionItemElement.value.expanded = !0);
+    this._overviewAccordionItemElement.value && (this._overviewAccordionItemElement.value.expanded = !0), this._releaseNotesAccordionItemElement.value && (this._releaseNotesAccordionItemElement.value.expanded = !0), this._relatedResourcesAccordionItemElement.value && (this._relatedResourcesAccordionItemElement.value.expanded = !0), this._screenshotsAccordionItemElement.value && (this._screenshotsAccordionItemElement.value.expanded = !0), this._termsOfUseAccordionItemElement.value && (this._termsOfUseAccordionItemElement.value.expanded = !0), this._youMayAlsoLikeAccordionItemElement.value && (this._youMayAlsoLikeAccordionItemElement.value.expanded = !0);
   }
   async _getItemData() {
-    const e = this._userSessionContextConsumer.value, t = await A(this.card.id, e), i = await L(this.card.id, e);
+    const e = this._userSessionContextConsumer.value, t = await L(this.card.id, e), i = await S(this.card.id, e);
     this._itemProperties = i.properties, this.itemPropertiesFetched.emit(this._itemProperties);
-    const o = S(t, this.card.typeKeywords, this._authContextConsumer.value);
-    this._privileges = e.username ? o : [], this._userPrivileges = this._authContextConsumer.value ? this._authContextConsumer.value.PortalUserPrivileges : [];
-    const a = this._privileges.filter((r) => !this._userPrivileges.includes(r));
-    this._missingPrivilegeMessages = I(this._translations, a), (t.params ? this.formatParams(t.params) : Promise.resolve([])).then((r) => {
+    const a = A(t, this.card.typeKeywords, this._authContextConsumer.value);
+    this._privileges = e.username ? a : [], this._userPrivileges = this._authContextConsumer.value ? this._authContextConsumer.value.PortalUserPrivileges : [];
+    const o = this._privileges.filter((r) => !this._userPrivileges.includes(r));
+    this._missingPrivilegeMessages = E(this._translations, o), (t.params ? this.formatParams(t.params) : Promise.resolve([])).then((r) => {
       this._userOptions = r;
     }), this._templates = t.templates, this.templatesFetched.emit(t.templates);
   }
   formatParams(e) {
-    const t = this._userSessionContextConsumer.value, i = [], o = e ? Object.keys(e) : [], a = {
+    const t = this._userSessionContextConsumer.value, i = [], a = e ? Object.keys(e) : [], o = {
       id: "",
       props: [],
       accordionDisplay: !1
     };
-    if (o.length > 0) {
+    if (a.length > 0) {
       const l = [];
-      return o.forEach((r) => {
+      return a.forEach((r) => {
         const h = e[r];
         h.valueType && h.valueType.toLowerCase() === "itemid" && l.push(this._findExistingItem(r, "Feature Service", t.username || ""));
       }), Promise.all(l).then((r) => {
@@ -209,32 +209,32 @@ class D extends x {
               response: n.results[0]
             };
           }
-        }), o.forEach((n) => {
+        }), a.forEach((n) => {
           if (n === "serviceLearnMore") {
             this._configureLearnMore = e[n], alert(this._configureLearnMore), delete e[n];
             return;
           }
-          e[n].enterpriseIDMapping && (this._customDeploymentMappings[n] = e[n].enterpriseIDMapping), a.id = n, h[n] && (e[n].existingItemId = h[n].resultId, this.updateUserProp(e[n], h[n].response)), this.updateOption(e[n], a, n);
-        }), i.push(a), Promise.resolve(i);
+          e[n].enterpriseIDMapping && (this._customDeploymentMappings[n] = e[n].enterpriseIDMapping), o.id = n, h[n] && (e[n].existingItemId = h[n].resultId, this.updateUserProp(e[n], h[n].response)), this.updateOption(e[n], o, n);
+        }), i.push(o), Promise.resolve(i);
       }).catch(() => Promise.resolve([]));
     } else
       return Promise.resolve([]);
   }
   _findExistingItem(e, t, i) {
-    const o = this._userSessionContextConsumer.value;
-    return E(`typekeywords:source-${e} type:${t} owner:${i}`, o);
+    const a = this._userSessionContextConsumer.value;
+    return C(`typekeywords:source-${e} type:${t} owner:${i}`, a);
   }
   updateUserProp(e, t) {
-    const i = e.itemType?.toLowerCase() === "feature service", o = new RegExp(i ? this._regexFsUrl : e.itemType, "iu"), a = _(t, i ? "url" : "type", "") || "", l = a !== "" && o.test(a);
-    return e.responseValue = l ? a : "", e.name = l && g(t, "name") || "", e.title = l && g(t, "title") || "", e.itemType = l ? g(t, "type") : e.itemType, e.validId = l, e.itemUrl = P(t.id, this._authContextConsumer.value), l;
+    const i = e.itemType?.toLowerCase() === "feature service", a = new RegExp(i ? this._regexFsUrl : e.itemType, "iu"), o = _(t, i ? "url" : "type", "") || "", l = o !== "" && a.test(o);
+    return e.responseValue = l ? o : "", e.name = l && g(t, "name") || "", e.title = l && g(t, "title") || "", e.itemType = l ? g(t, "type") : e.itemType, e.validId = l, e.itemUrl = T(t.id, this._authContextConsumer.value), l;
   }
   updateOption(e, t, i) {
-    const o = e.default || "", a = typeof o, l = o.toString();
+    const a = e.default || "", o = typeof a, l = a.toString();
     this._setFeatureServiceProps(e);
     const r = this.getValidation(e, l);
     t.props.push({
       id: i,
-      outType: a,
+      outType: o,
       prop: i,
       itemType: e.itemType || "",
       responseValue: e.responseValue || "",
@@ -256,15 +256,15 @@ class D extends x {
     });
   }
   _setFeatureServiceProps(e) {
-    e.valueType && e.valueType.toLowerCase() === "itemid" && M(e, "attributes.required", "true");
+    e.valueType && e.valueType.toLowerCase() === "itemid" && I(e, "attributes.required", "true");
   }
   getValidation(e, t) {
-    let i = "", o = g(e, "validation.message") || "", a = !0;
-    return g(e, "attributes.required") === "true" && (i = _(e, "validation.expression", "\\S{1,}"), a = new RegExp(i).test(t)), e.valueType && e.valueType.toLowerCase() === "itemid" && (i = this._regexID, o = this._translations.configure.invalidID), {
-      valid: a,
+    let i = "", a = g(e, "validation.message") || "", o = !0;
+    return g(e, "attributes.required") === "true" && (i = _(e, "validation.expression", "\\S{1,}"), o = new RegExp(i).test(t)), e.valueType && e.valueType.toLowerCase() === "itemid" && (i = this._regexID, a = this._translations.configure.invalidID), {
+      valid: o,
       validation: {
         expression: i,
-        message: o
+        message: a
       }
     };
   }
@@ -291,7 +291,7 @@ class D extends x {
     e.detail === "details" && this.sortTypeChanged.emit("");
   }
 }
-w("solution-details-panel", D);
+b("solution-details-panel", O);
 export {
-  D as SolutionDetailsPanel
+  O as SolutionDetailsPanel
 };

package/dist/components/solution-details-panel/index.d.ts

@@ -18,7 +18,7 @@ import "@esri/calcite-components/components/calcite-table";
 import "@esri/calcite-components/components/calcite-table-row";
 import "@esri/calcite-components/components/calcite-table-header";
 import "@esri/calcite-components/components/calcite-table-cell";
-import "../solution-article-card/index.js";
+import "../solution-resource-card/index.js";
 import "../solution-details-card/index.js";
 import "@esri/calcite-components/components/calcite-link";
 export * from "./customElement.js";

package/dist/components/solution-details-panel/index.js

@@ -18,7 +18,7 @@ import "@esri/calcite-components/components/calcite-table";
 import "@esri/calcite-components/components/calcite-table-row";
 import "@esri/calcite-components/components/calcite-table-header";
 import "@esri/calcite-components/components/calcite-table-cell";
-import "../solution-article-card/index.js";
+import "../solution-resource-card/index.js";
 import "../solution-details-card/index.js";
 import "@esri/calcite-components/components/calcite-link";
 export * from "./customElement.js";

package/dist/components/solution-item/customElement.js

@@ -5,7 +5,7 @@ import { css as l, html as i } from "lit";
 import { LitElement as n, noShadowRoot as c, safeStyleMap as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const r = l`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-item-accordion/customElement.d.ts

@@ -42,6 +42,8 @@ export declare class SolutionItemAccordion extends LitElement {
      * @param id the id of the item to select
      */
     selectItem(id: string): Promise<void>;
+    /** Selects the first item in the accordion and expands the accordion item containing it. */
+    selectFirstItem(): Promise<void>;
     /**
      * Selects items in the accordion and expands the accordion item containing it.
      * Only applies when selectionMode is 'multiple'.

package/dist/components/solution-item-accordion/customElement.js

@@ -1,10 +1,10 @@
 import { c } from "../../chunks/runtime.js";
 import { u as a } from "../../chunks/useT9n.js";
-import { css as d, html as n, nothing as p } from "lit";
-import { LitElement as h, createEvent as l } from "@arcgis/lumina";
+import { css as d, html as l, nothing as p } from "lit";
+import { LitElement as h, createEvent as n } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const m = d`/** @license
  * Copyright 2025 Esri
  *
@@ -55,7 +55,7 @@ class u extends h {
       "Report Template",
       "Rule Package",
       "Group"
-    ], this.solutionItemHover = l(), this.solutionItemSelect = l(), this.solutionTypeHover = l();
+    ], this.solutionItemHover = n(), this.solutionItemSelect = n(), this.solutionTypeHover = n();
   }
   static {
     this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, templateInfos: 0, typeKeywords: 0, _sortedTemplateInfos: 16, _translations: 16 };
@@ -84,6 +84,10 @@ class u extends h {
       t.id === e && (t.selected = !0, (t.parentElement?.parentElement).expanded = !0);
     });
   }
+  async selectFirstItem() {
+    const e = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    e?.length && (e[0].selected = !0, (e[0].parentElement?.parentElement).expanded = !0);
+  }
   async selectItems(e) {
     this.listSelectionMode === "multiple" && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
       e.indexOf(t.id) > -1 && (t.selected = !0, (t.parentElement?.parentElement).expanded = !0);
@@ -105,21 +109,21 @@ class u extends h {
       const o = this._getTypeForDisplay(s.type, s.typeKeywords);
       return e.indexOf(o) < 0 && (e.push(o), t.push(this._getAccordionItem(s))), t;
     }, []);
-    return n`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
+    return l`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
   }
   _getAccordionItem(e) {
     const i = this._getTypeForDisplay(e.type, e.typeKeywords), t = this._sortedTemplateInfos.filter((s) => this._getTypeForDisplay(s.type, s.typeKeywords) === i);
-    return n`<calcite-accordion-item .description=${`${i} (${t.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: i, entering: !0 })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: i, entering: !1 })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${e.type} .typeKeywords=${e.typeKeywords}></solution-item-icon>${this._getList(t)}</calcite-accordion-item>`;
+    return l`<calcite-accordion-item .description=${`${i} (${t.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: i, entering: !0 })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: i, entering: !1 })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${e.type} .typeKeywords=${e.typeKeywords}></solution-item-icon>${this._getList(t)}</calcite-accordion-item>`;
   }
   _getList(e) {
     const i = this._sortTemplatesByTitle(e);
-    return n`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${i.map((t) => this._getListItem(t))}</calcite-list>`;
+    return l`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${i.map((t) => this._getListItem(t))}</calcite-list>`;
   }
   _getListItem(e) {
     const i = this.typeKeywords.includes("Deployed") && e.url, t = this.linkType === "action";
-    return n`<calcite-list-item id=${e.id ?? p} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
+    return l`<calcite-list-item id=${e.id ?? p} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
       this._deselectOthers(e.id), this.solutionItemSelect.emit({ itemId: e.id, selected: !0 }), i && !t && window.open(e.url, "_blank");
-    }} .value=${e.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${i && !t ? "underline" : ""}`}>${e.title}</div><div class="solution-list-item-description">${e.snippet}</div></div>${this.itemRelationshipDependencies.length > 0 && this.itemRelationshipDependencies.some((s) => s === e.id) && n`<calcite-chip slot=actions-end icon=information scale=s .label=${this._translations?.itemDependency}>${this._translations?.itemDependency}</calcite-chip>` || ""}${i && t ? n`<div slot=actions-end><calcite-action icon=launch .id=${`${e.id}-launch`} @click=${() => window.open(e.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${e.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
+    }} .value=${e.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${i && !t ? "underline" : ""}`}>${e.title}</div><div class="solution-list-item-description">${e.snippet}</div></div>${this.itemRelationshipDependencies.length > 0 && this.itemRelationshipDependencies.some((s) => s === e.id) && l`<calcite-chip slot=actions-end icon=information scale=s .label=${this._translations?.itemDependency}>${this._translations?.itemDependency}</calcite-chip>` || ""}${i && t ? l`<div slot=actions-end><calcite-action icon=launch .id=${`${e.id}-launch`} @click=${() => window.open(e.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${e.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
   }
   _sortTemplatesByTitle(e) {
     return e.sort((i, t) => i.title < t.title ? -1 : i.title > t.title ? 1 : 0);

package/dist/components/solution-item-details/customElement.js

@@ -6,7 +6,7 @@ import { createRef as a, ref as s } from "lit-html/directives/ref.js";
 import { LitElement as c, noShadowRoot as h } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const p = m`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-item-diagram/customElement.js

@@ -8,7 +8,7 @@ import { g as D } from "../../chunks/getItemIcon.js";
 import { injectGlobal as A } from "@emotion/css";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const P = b`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-item-icon/customElement.js

@@ -4,7 +4,7 @@ import { LitElement as n, nothing as e } from "@arcgis/lumina";
 import { g as o } from "../../chunks/getItemIcon.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const r = i`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-item-sharing/customElement.js

@@ -5,7 +5,7 @@ import { css as h, html as a, nothing as o } from "lit";
 import { LitElement as p } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const d = h`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-organization-variables/customElement.js

@@ -4,7 +4,7 @@ import { css as n, html as a } from "lit";
 import { LitElement as o, createEvent as l } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.2 */
+v1.2.0-next.21 */
 const c = n`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-resource-card/customElement.d.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+
+export declare class SolutionResourceCard extends LitElement {
+    /**
+     * The date the resource or blog was published
+     *
+     * @default ''
+     */
+    date: string;
+    /**
+     * The heading of the resource or blog
+     *
+     * @default ''
+     */
+    heading: string;
+    /**
+     * The href for the resource or blog content
+     *
+     * @default ''
+     */
+    href: string;
+    /**
+     * The image url for the resource or blog
+     *
+     * @default ''
+     */
+    src: string;
+    /**
+     * The type...resource or blog
+     *
+     * @default 'resource'
+     */
+    type: 'resource' | 'blog';
+    /** Emitted on demand when the card is selected. */
+    readonly resourceCardSelected: TargetedEvent<this, string>;
+}