@esri/solutions-components 0.7.7 → 0.7.8

package/dist/esm/{utils-06bace50.js → utils-b1bd777e.js}

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { b as getLocaleComponentStrings } from './locale-53d724b5.js';
+import { b as getLocaleComponentStrings } from './locale-89b49505.js';
 import { c as createStore } from './index-857df22e.js';
 
 var EInputType;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-export/instant-apps-export.css

@@ -12,15 +12,15 @@
 */
 :host {
   display: block;
-  --instant-apps-export-action-background: var(--calcite-ui-foreground-1);
-  --instant-apps-export-action-background-hover: var(--calcite-ui-foreground-2);
-  --instant-apps-export-action-background-press: var(--calcite-ui-foreground-3);
+  --instant-apps-export-action-background: var(--calcite-color-foreground-1);
+  --instant-apps-export-action-background-hover: var(--calcite-color-foreground-2);
+  --instant-apps-export-action-background-press: var(--calcite-color-foreground-3);
   --instant-apps-export-action-height: 100%;
   --instant-apps-export-action-width: fit-content;
-  --instant-apps-export-action-icon-color: var(--calcite-ui-text-3);
-  --instant-apps-export-action-icon-hover-color: var(--calcite-ui-text-1);
-  --instant-apps-export-background: var(--calcite-ui-foreground-1);
-  --instant-apps-export-text-color: var(--calcite-ui-text-1);
+  --instant-apps-export-action-icon-color: var(--calcite-color-text-3);
+  --instant-apps-export-action-icon-hover-color: var(--calcite-color-text-1);
+  --instant-apps-export-background: var(--calcite-color-foreground-1);
+  --instant-apps-export-text-color: var(--calcite-color-text-1);
   --instant-apps-export-popover-width: 250px;
 }
 
@@ -33,7 +33,7 @@
 .instant-apps-export__popover-container, .instant-apps-export__inline-container {
   padding: 12px;
   background: var(--instant-apps-export-background);
-  --calcite-ui-text-1: var(--instant-apps-export-text-color);
+  --calcite-color-text-1: var(--instant-apps-export-text-color);
 }
 .instant-apps-export__popover-container {
   width: var(--instant-apps-export-popover-width);
@@ -41,11 +41,11 @@
 .instant-apps-export calcite-action {
   height: var(--instant-apps-export-action-height);
   width: var(--instant-apps-export-action-width);
-  --calcite-ui-foreground-1: var(--instant-apps-export-action-background);
-  --calcite-ui-foreground-2: var(--instant-apps-export-action-background-hover);
-  --calcite-ui-foreground-3: var(--instant-apps-export-action-background-press);
-  --calcite-ui-text-3: var(--instant-apps-export-action-icon-color);
-  --calcite-ui-text-1: var(--instant-apps-export-action-icon-hover-color);
+  --calcite-color-foreground-1: var(--instant-apps-export-action-background);
+  --calcite-color-foreground-2: var(--instant-apps-export-action-background-hover);
+  --calcite-color-foreground-3: var(--instant-apps-export-action-background-press);
+  --calcite-color-text-3: var(--instant-apps-export-action-icon-color);
+  --calcite-color-text-1: var(--instant-apps-export-action-icon-hover-color);
 }
 .instant-apps-export .instant-apps-export-print {
   display: none;
@@ -57,19 +57,19 @@
   visibility: hidden;
 }
 .instant-apps-export calcite-input {
-  --calcite-ui-foreground-1: var(--instant-apps-export-background);
-  --calcite-ui-text-1: var(--instant-apps-export-text-color);
+  --calcite-color-foreground-1: var(--instant-apps-export-background);
+  --calcite-color-text-1: var(--instant-apps-export-text-color);
 }
 .instant-apps-export calcite-popover {
-  --calcite-ui-foreground-1: var(--instant-apps-export-background);
+  --calcite-color-foreground-1: var(--instant-apps-export-background);
 }
 .instant-apps-export calcite-switch {
-  --calcite-ui-foreground-1: #fff;
-  --calcite-ui-foreground-2: #f3f3f3;
+  --calcite-color-foreground-1: #fff;
+  --calcite-color-foreground-2: #f3f3f3;
 }
 .instant-apps-export .calcite-mode-dark calcite-switch {
-  --calcite-ui-foreground-1: #2b2b2b;
-  --calcite-ui-foreground-2: #202020;
+  --calcite-color-foreground-1: #2b2b2b;
+  --calcite-color-foreground-2: #202020;
 }
 
 .instant-apps-export__compass-container.esri-widget {

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-filter-list/instant-apps-filter-list.css

@@ -57,9 +57,9 @@
 }
 .instant-apps-filter-list__date-picker-input-container calcite-action {
   height: 48px;
-  border-top: 1px solid var(--calcite-ui-border-input);
-  border-right: 1px solid var(--calcite-ui-border-input);
-  border-bottom: 1px solid var(--calcite-ui-border-input);
+  border-top: 1px solid var(--calcite-color-border-input);
+  border-right: 1px solid var(--calcite-color-border-input);
+  border-bottom: 1px solid var(--calcite-color-border-input);
 }
 .instant-apps-filter-list__title {
   margin-right: 20px;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-header/instant-apps-header.css

@@ -63,8 +63,8 @@
   justify-content: space-between;
   width: 100%;
   height: var(--instant-apps-header-height);
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-color-foreground-1);
+  color: var(--calcite-color-text-1);
   font-family: var(--calcite-sans-family);
   min-height: var(--instant-apps-header-min-height);
 }
@@ -110,7 +110,7 @@
 :host .instant-apps-header--standard .instant-apps-header__header-content h1 {
   margin: 0;
   font-size: 1.25rem;
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
   font-weight: 430;
   white-space: nowrap;
   overflow: hidden;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-classic/instant-apps-interactive-legend-classic.css

@@ -3,7 +3,7 @@
   --instant-apps-interactive-legend-heading-font-size: 1rem;
   --instant-apps-interactive-legend-heading-font-weight: normal;
   --instant-apps-interactive-legend-caption-font-weight: normal;
-  --instant-apps-interactive-legend-secondary-color: var(--calcite-ui-text-1);
+  --instant-apps-interactive-legend-secondary-color: var(--calcite-color-text-1);
   --instant-apps-interactive-legend-field-name-font-size: 1rem;
   --instant-apps-interactive-legend-total-feature-count-font-size: 0.875rem;
   --instant-apps-interactive-legend-info-font-size: 0.875rem;
@@ -11,8 +11,8 @@
   --instant-apps-interactive-legend-info-item-background--selected--dark: #009af2;
   --instant-apps-interactive-legend-info-item-background--hover: #e9e9e9;
   --instant-apps-interactive-legend-info-item-background--hover--dark: #4a4a4a;
-  --instant-apps-interactive-legend-info-item-color--selected: var(--calcite-ui-text-2);
-  --instant-apps-interactive-legend-secondary-background-color: var(--calcite-ui-background);
+  --instant-apps-interactive-legend-info-item-color--selected: var(--calcite-color-text-2);
+  --instant-apps-interactive-legend-secondary-background-color: var(--calcite-color-background);
   --instant-apps-interactive-legend-ui-margin: 20px 15px;
   --instant-apps-interactive-legend-ui-padding: 20px 15px;
 }
@@ -99,7 +99,7 @@
   background-color: var(--instant-apps-interactive-legend-info-item-background--selected--dark);
 }
 :host .calcite-mode-dark .instant-apps-interactive-legend-element-info--selected .esri-legend__layer-cell--info {
-  color: var(--calcite-ui-text-inverse);
+  color: var(--calcite-color-text-inverse);
 }
 :host .hide {
   display: none;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-count/instant-apps-interactive-legend-count.css

@@ -9,7 +9,7 @@
 }
 
 .calcite-mode-dark.instant-apps-interactive-legend__info-count-text.instant-apps-interactive-legend__info-count-text--selected {
-  color: var(--calcite-ui-text-inverse);
+  color: var(--calcite-color-text-inverse);
 }
 
 html[dir=rtl] :host {

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-group-legend-element-caption/instant-apps-interactive-legend-group-legend-element-caption.css

@@ -2,7 +2,7 @@
   display: block;
   --instant-apps-interactive-legend-heading-font-size: 1rem;
   --instant-apps-interactive-legend-heading-font-weight: normal;
-  --instant-apps-interactive-legend-secondary-color: var(--calcite-ui-text-1);
+  --instant-apps-interactive-legend-secondary-color: var(--calcite-color-text-1);
   --instant-apps-interactive-legend-ui-padding: 15px 10px;
 }
 :host .esri-widget__heading {
@@ -28,16 +28,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
+  -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: normal;
   color: var(--instant-apps-interactive-legend-secondary-color);
 }
 :host header .instant-apps-interactive-legend__heading-text--group-item {
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
+  -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
 }
 :host header span {
@@ -58,10 +56,10 @@
 
 :host(.calcite-mode-dark) .instant-apps-interactive-legend__header {
   background-color: #242424;
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 
 :host(.calcite-mode-light) .instant-apps-interactive-legend__header {
   background-color: #ffffff;
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-layer-element-caption/instant-apps-interactive-legend-layer-element-caption.css

@@ -2,7 +2,7 @@
   display: block;
   --instant-apps-interactive-legend-heading-font-size: 1rem;
   --instant-apps-interactive-legend-heading-font-weight: normal;
-  --instant-apps-interactive-legend-secondary-color: var(--calcite-ui-text-1);
+  --instant-apps-interactive-legend-secondary-color: var(--calcite-color-text-1);
   --instant-apps-interactive-legend-ui-padding: 15px 10px;
 }
 :host .esri-widget__heading {
@@ -28,8 +28,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
+  -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: normal;
@@ -37,8 +36,7 @@
   margin-bottom: 5px;
 }
 :host header .instant-apps-interactive-legend__heading-text--group-item {
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
+  -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
 }
 :host header span {
@@ -59,10 +57,10 @@
 
 :host(.calcite-mode-dark) .instant-apps-interactive-legend__header {
   background-color: #242424;
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 
 :host(.calcite-mode-light) .instant-apps-interactive-legend__header {
   background-color: #ffffff;
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-legend-element-caption/instant-apps-interactive-legend-legend-element-caption.css

@@ -3,13 +3,13 @@
   --instant-apps-interactive-legend-heading-font-size: 1rem;
   --instant-apps-interactive-legend-heading-font-weight: normal;
   --instant-apps-interactive-legend-caption-font-weight: normal;
-  --instant-apps-interactive-legend-secondary-color: var(--calcite-ui-text-1);
+  --instant-apps-interactive-legend-secondary-color: var(--calcite-color-text-1);
   --instant-apps-interactive-legend-field-name-font-size: 1rem;
   --instant-apps-interactive-legend-total-feature-count-font-size: 0.875rem;
   --instant-apps-interactive-legend-info-font-size: 0.875rem;
   --instant-apps-interactive-legend-info-item-background--selected: #c7ebff;
-  --instant-apps-interactive-legend-info-item-color--selected: var(--calcite-ui-text-2);
-  --instant-apps-interactive-legend-secondary-background-color: var(--calcite-ui-background);
+  --instant-apps-interactive-legend-info-item-color--selected: var(--calcite-color-text-2);
+  --instant-apps-interactive-legend-secondary-background-color: var(--calcite-color-background);
   --instant-apps-interactive-legend-ui-padding: 15px 10px;
 }
 :host .esri-legend__layer-caption {
@@ -29,8 +29,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
+  -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: normal;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend-relationship/instant-apps-interactive-legend-relationship.css

@@ -10,6 +10,6 @@
 }
 
 .calcite-mode-dark :host .instant-apps-interactive-legend-relationship__instructional-text {
-  background-color: var(--calcite-ui-brand);
+  background-color: var(--calcite-color-brand);
   color: #151515;
 }

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-interactive-legend/instant-apps-interactive-legend.css

@@ -4,8 +4,8 @@
 }
 :host .esri-legend {
   height: 100%;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-color-foreground-1);
+  color: var(--calcite-color-text-1);
 }
 :host .esri-legend.esri-component.esri-widget.esri-widget--panel {
   margin: 0;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-keyboard-shortcuts/instant-apps-keyboard-shortcuts.css

@@ -3,8 +3,8 @@
   flex-direction: column;
   font-family: var(--calcite-sans-family);
   font-size: 0.875rem;
-  background-color: var(--calcite-ui-background);
-  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-color-background);
+  color: var(--calcite-color-text-1);
   width: auto;
   padding: 0.5em;
   margin-bottom: 0;
@@ -17,7 +17,7 @@
   margin-bottom: 1em;
 }
 :host .instant-apps-keyboard-shortcuts__content table td, :host .instant-apps-keyboard-shortcuts__content table th {
-  border: solid 1px var(--calcite-ui-border-1);
+  border: solid 1px var(--calcite-color-border-1);
   padding: 0.5rem 0.75rem 0.5rem 0.75rem;
   white-space: normal;
 }
@@ -25,7 +25,7 @@
   white-space: nowrap;
 }
 :host .instant-apps-keyboard-shortcuts__content tr:nth-child(even) {
-  background-color: var(--calcite-ui-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
 }
 :host .instant-apps-keyboard-shortcuts__content tr th {
   padding: 0.5em 0.7em;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-landing-page/instant-apps-landing-page.css

@@ -11,9 +11,9 @@
   * @prop --instant-apps-landing-page-icon-image-scale--l: Icon image width when scale is set to 'l'. Default value is 500px.
   * @prop --instant-apps-landing-page-entry-button-margin: Option to provide spacing in case a secondary action is added to the landing page.
   */
-  --instant-apps-landing-page-background-color: var(--calcite-ui-brand);
-  --instant-apps-landing-page-text-color: var(--calcite-ui-text-inverse);
-  --instant-apps-landing-page-entry-button-color: var(--calcite-ui-brand);
+  --instant-apps-landing-page-background-color: var(--calcite-color-brand);
+  --instant-apps-landing-page-text-color: var(--calcite-color-text-inverse);
+  --instant-apps-landing-page-entry-button-color: var(--calcite-color-brand);
   --instant-apps-landing-page-title-text-font-size: var(--calcite-font-size-6);
   --instant-apps-landing-page-subtitle-text-font-size: var(--calcite-font-size-3);
   --instant-apps-landing-page-description-text-font-size: var(--calcite-font-size-0);
@@ -75,9 +75,9 @@
   margin: var(--instant-apps-landing-page-entry-button-margin);
 }
 :host .instant-apps-landing-page__entry-button {
-  --calcite-ui-brand: var(--instant-apps-landing-page-entry-button-color);
-  --calcite-ui-brand-hover: var(--instant-apps-landing-page-entry-button-color);
-  --calcite-ui-brand-press: var(--instant-apps-landing-page-entry-button-color);
+  --calcite-color-brand: var(--instant-apps-landing-page-entry-button-color);
+  --calcite-color-brand-hover: var(--instant-apps-landing-page-entry-button-color);
+  --calcite-color-brand-press: var(--instant-apps-landing-page-entry-button-color);
 }
 :host .instant-apps-landing-page__remove-transition {
   transition: none;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-language-switcher/instant-apps-language-switcher.css

@@ -1,13 +1,13 @@
 :host {
   display: block;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-1);
+  background-color: var(--calcite-color-foreground-1);
+  color: var(--calcite-color-text-1);
   min-width: 200px;
 }
 :host calcite-dropdown {
   width: 100%;
 }
 :host calcite-button {
-  --calcite-ui-brand: var(--calcite-ui-text-3);
-  --calcite-ui-brand-hover: var(--calcite-ui-text-3);
+  --calcite-color-brand: var(--calcite-color-text-3);
+  --calcite-color-brand-hover: var(--calcite-color-text-3);
 }

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-language-translator/instant-apps-language-translator-item/instant-apps-language-translator-item.css

@@ -6,8 +6,8 @@
 }
 :host .instant-apps-language-translator-item__section {
   padding: 10px;
-  border-bottom: 1px solid var(--calcite-ui-border-1);
-  background-color: var(--calcite-ui-foreground-2);
+  border-bottom: 1px solid var(--calcite-color-border-1);
+  background-color: var(--calcite-color-foreground-2);
   width: 49%;
 }
 :host .instant-apps-language-translator-item__section .instant-apps-language-translator-item__top-row {
@@ -58,7 +58,7 @@
   line-height: 22px;
 }
 :host .instant-apps-language-translator-item__info-icon {
-  color: var(--calcite-ui-brand);
+  color: var(--calcite-color-brand);
 }
 :host .instant-apps-language-translator-item__info-button {
   border: 0;
@@ -68,14 +68,14 @@
 
 :host(.calcite-mode-dark) .instant-apps-language-translator-item__section--selected {
   background-color: #f1faff;
-  background-color: var(--calcite-ui-brand);
-  color: var(--calcite-ui-text-inverse);
+  background-color: var(--calcite-color-brand);
+  color: var(--calcite-color-text-inverse);
 }
 :host(.calcite-mode-dark) .instant-apps-language-translator-item__section--selected calcite-action {
-  --calcite-ui-icon-color: var(--calcite-ui-text-inverse);
+  --calcite-ui-icon-color: var(--calcite-color-text-inverse);
 }
 :host(.calcite-mode-dark) .instant-apps-language-translator-item__section--selected calcite-icon {
-  color: var(--calcite-ui-text-inverse);
+  color: var(--calcite-color-text-inverse);
 }
 
 :host(.instant-apps-language-translator--last-item) .instant-apps-language-translator-item__section {

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-language-translator/instant-apps-language-translator-search/instant-apps-language-translator-search.css

@@ -13,7 +13,7 @@
   max-height: 30vh;
   overflow: auto;
   border-left: none;
-  background-color: var(--calcite-ui-foreground-1);
+  background-color: var(--calcite-color-foreground-1);
   border: 1px solid #c0c0c0;
   z-index: 702;
 }
@@ -30,5 +30,5 @@
   word-break: break-word;
 }
 :host .instant-apps-language-translator-search__suggestion-list-item:hover {
-  background-color: var(--calcite-ui-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
 }

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-language-translator/instant-apps-language-translator.css

@@ -16,7 +16,7 @@
   display: flex;
   align-items: center;
   font-size: 14.5px;
-  color: var(--calcite-ui-brand);
+  color: var(--calcite-color-brand);
 }
 :host .instant-apps-language-translator__writing-icon {
   display: flex;
@@ -36,7 +36,7 @@
   width: 100%;
   position: sticky;
   top: 0;
-  background: var(--calcite-ui-foreground-1);
+  background: var(--calcite-color-foreground-1);
   z-index: 1;
 }
 :host .instant-apps-language-translator__top-bar calcite-label {

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-measurement/instant-apps-measurement.css

@@ -1,6 +1,6 @@
 :host .sc-instant-apps-measurement {
-  background: var(--calcite-ui-foreground-1);
+  background: var(--calcite-color-foreground-1);
 }
 :host .active-tool {
-  --calcite-ui-foreground-1:#c7eaff;
+  --calcite-color-foreground-1:#c7eaff;
 }

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-popover/instant-apps-popover.css

@@ -12,12 +12,12 @@
 }
 .instant-apps-popover__content .instant-apps-popover__action {
   align-self: flex-start;
-  --calcite-ui-foreground-2: transparent;
+  --calcite-color-foreground-2: transparent;
 }
 .instant-apps-popover__content span {
   display: inline-block;
   font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
   margin: 0 0 10px 0;
   font-family: var(--calcite-sans-family);
 }
@@ -40,7 +40,7 @@
   font-family: var(--calcite-sans-family);
 }
 .instant-apps-popover__content .instant-apps-popover__footer calcite-button:first-child {
-  --calcite-ui-foreground-3: transparent;
+  --calcite-color-foreground-3: transparent;
 }
 .instant-apps-popover__content .instant-apps-popover__footer calcite-button:last-child {
   margin-left: 5px;

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-scoreboard/instant-apps-scoreboard.css

@@ -12,15 +12,15 @@
   * @prop --instant-apps-scoreboard-text-color: Text color of scoreboard.
    * @prop --instant-apps-scoreboard-mobile-position-bottom: Scoreboard's bottom position (px) of absolutely positioned element on mobile.
   */
-  --instant-apps-scoreboard-background-color: var(--calcite-ui-foreground-1);
-  --instant-apps-scoreboard-text-color: var(--calcite-ui-text-1);
+  --instant-apps-scoreboard-background-color: var(--calcite-color-foreground-1);
+  --instant-apps-scoreboard-text-color: var(--calcite-color-text-1);
   --instant-apps-scoreboard-mobile-position-bottom: 0;
   background-color: var(--instant-apps-scoreboard-background-color);
   color: var(--instant-apps-scoreboard-text-color);
 }
 :host .instant-apps-scoreboard {
   box-sizing: border-box;
-  border: 1px solid var(--calcite-ui-border-1);
+  border: 1px solid var(--calcite-color-border-1);
   box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
@@ -79,7 +79,7 @@
   display: inline-block;
   width: 32px;
   height: 32px;
-  background-color: var(--calcite-ui-foreground-3);
+  background-color: var(--calcite-color-foreground-3);
   border-radius: 4px;
 }
 

package/dist/node_modules/@esri/instant-apps-components/dist/collection/components/instant-apps-social-share/instant-apps-social-share.css

@@ -21,7 +21,7 @@
   --instant-apps-social-share-width-horizontal--s: 300px;
   --instant-apps-social-share-width-horizontal--m: 380px;
   --instant-apps-social-share-width-horizontal--l: 420px;
-  --instant-apps-social-share-background-color: var(--calcite-ui-foreground-1);
+  --instant-apps-social-share-background-color: var(--calcite-color-foreground-1);
   --instant-apps-social-share-popover-button-background-color: transparent;
   --instant-apps-social-share-popover-button-icon-color: var(--calcite-ui-icon-color);
   --instant-apps-social-share-embed-border: 1px solid $border;
@@ -75,7 +75,7 @@
 }
 :host .instant-apps-social-share__options li:hover {
   cursor: pointer;
-  background-color: var(--calcite-ui-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
 }
 :host .instant-apps-social-share__tip {
   box-sizing: border-box;
@@ -112,7 +112,7 @@
   margin-right: 5px;
 }
 :host .instant-apps-social-share__success-icon calcite-icon {
-  color: var(--calcite-ui-success);
+  color: var(--calcite-color-status-success);
 }
 :host .instant-apps-social-share__success-message {
   line-height: 16px;
@@ -143,7 +143,7 @@
   background: transparent;
   width: 100%;
   font-family: var(--calcite-sans-family);
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 :host .instant-apps-social-share__embed-code-text-area button {
   display: flex;
@@ -156,7 +156,7 @@
   line-height: 16px;
   font-weight: 400;
   padding: 3%;
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 :host .instant-apps-social-share__embed-code-text-area button calcite-icon {
   color: #007ac2;
@@ -164,7 +164,7 @@
 }
 :host .instant-apps-social-share__embed-code-text-area button:hover {
   cursor: pointer;
-  background-color: var(--calcite-ui-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
   transition: background-color 0.15s ease-out 0s;
 }
 :host .instant-apps-social-share__embed-text-area-text {

package/dist/solutions-components/demos/browse-solutions.html

@@ -297,9 +297,11 @@
     async function save() {
       const saveBtn = document.getElementById("saveBtn");
       saveBtn.setAttribute("loading", true);
+      saveBtn.setAttribute("disabled", true);
       const demo = document.getElementById("demo");
       demo.save().then(() => {
         saveBtn.removeAttribute("loading");
+        saveBtn.removeAttribute("disabled");
       });
     }
   </script>

package/dist/solutions-components/demos/buffer-tools.html

@@ -31,7 +31,7 @@
       .over-map {
         position: absolute;
         right: 0px;
-        background-color: var(--calcite-ui-foreground-1);
+        background-color: var(--calcite-color-foreground-1);
       }
       .column {
         min-width: 300px;

package/dist/solutions-components/demos/card-manager.html

@@ -23,7 +23,7 @@
     -->
     <style>
       .main {
-        background-color: var(--calcite-ui-foreground-1);
+        background-color: var(--calcite-color-foreground-1);
         display: grid;
         align-self: center;
       }
@@ -31,7 +31,7 @@
         width: 360px;
         height: 340px;
         padding: 1rem;
-        border: 1px solid var(--calcite-ui-border-2);
+        border: 1px solid var(--calcite-color-border-2);
       }
     </style>
 

package/dist/solutions-components/demos/crowdsource-manager.html

@@ -28,14 +28,14 @@
       }
     </style>
 
-    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.28/esri/themes/light/main.css" />
-    <!-- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.28/esri/themes/dark/main.css" /> -->
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
+    <!-- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/dark/main.css" /> -->
     <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
 
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://jsdev.arcgis.com/4.28/"></script>
+    <script src="https://jsdev.arcgis.com/4.29/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>