@esri/solutions-components 0.7.12-alpha → 0.7.13

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

@@ -0,0 +1,104 @@
+:host {
+  display: block;
+}
+
+.instant-apps-filter-list * {
+  box-sizing: border-box;
+}
+.instant-apps-filter-list__container {
+  height: 100%;
+}
+.instant-apps-filter-list__container calcite-block:last-of-type {
+  margin-bottom: 0;
+}
+.instant-apps-filter-list__footer {
+  padding: 12px;
+  display: flex;
+}
+.instant-apps-filter-list__footer calcite-button:nth-child(2) {
+  margin-left: 6px;
+}
+.instant-apps-filter-list__item-container, .instant-apps-filter-list__item-container--user-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.instant-apps-filter-list__item-container:not(:last-child), .instant-apps-filter-list__item-container--user-input:not(:last-child) {
+  padding-bottom: 20px;
+}
+.instant-apps-filter-list__item-container--user-input {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.instant-apps-filter-list__item-container--user-input > span {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-weight: normal;
+}
+.instant-apps-filter-list__item-container--user-input calcite-combobox {
+  width: 100%;
+  font-size: 16px;
+}
+.instant-apps-filter-list__number-input-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.instant-apps-filter-list__number-input-container calcite-slider {
+  width: 90%;
+}
+.instant-apps-filter-list__date-picker-input-container {
+  display: flex;
+  align-items: center;
+  justify-content: unset;
+  width: 100%;
+}
+.instant-apps-filter-list__date-picker-input-container calcite-action {
+  height: 48px;
+  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;
+}
+.instant-apps-filter-list__title > p {
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0;
+}
+.instant-apps-filter-list__checkbox-container {
+  display: flex;
+}
+.instant-apps-filter-list__checkbox-container calcite-checkbox {
+  height: 18px;
+}
+.instant-apps-filter-list__operator-description {
+  margin: 0;
+  --calcite-font-size--1: 12px;
+}
+.instant-apps-filter-list__zoom-to {
+  display: flex;
+  justify-content: flex-end;
+  margin: 8px 0 20px;
+}
+.instant-apps-filter-list__zoom-to calcite-action {
+  width: -moz-min-content;
+  width: min-content;
+}
+
+@media (prefers-reduced-motion) {
+  .instant-apps-filter-list calcite-loader {
+    --calcite-internal-duration-factor: 2;
+    --calcite-internal-animation-timing-slow: calc(300ms * 2);
+  }
+}
+.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__header-container {
+  background: #2b2b2b;
+  color: #fff;
+}
+.instant-apps-filter-list.calcite-mode-dark .instant-apps-filter-list__operator-description {
+  background: #353535;
+}

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

@@ -0,0 +1,165 @@
+/*
+ *   Copyright (c) 2023 Esri
+ *   All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+ *   This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement.
+ *   You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+ *   See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
+ */
+:host {
+  /**
+  * @prop --instant-apps-header-height: Height for header. Default: auto;
+  */
+  --instant-apps-header-height: auto;
+  /**
+  * @prop --instant-apps-header-min-height: Minimum height for header. Default: 50px;
+  */
+  --instant-apps-header-min-height: 50px;
+  /**
+  * @prop --instant-apps-header-title-text-link-decoration: Text decoration for hyperlinks for `titleTextLink`. Default value is 'underline'.
+  */
+  --instant-apps-header-title-text-link-decoration: underline;
+  /**
+  * @prop --instant-apps-header-height--logo-scale--s: Header height when logo scale is set to 's'. Default value is 55px.
+  */
+  --instant-apps-header-height--logo-scale--s: 55px;
+  /**
+  * @prop --instant-apps-header-logo-width--logo-scale--s: Logo width when logo scale is set to 's'. Default value: 35px.
+  */
+  --instant-apps-header-logo-width--logo-scale--s: 35px;
+  /**
+  * @prop  --instant-apps-header-logo-height--logo-scale--s: Logo height when logo scale is set to 's'. Default value: 35px.
+  */
+  --instant-apps-header-logo-height--logo-scale--s: 35px;
+  /**
+  * @prop --instant-apps-header-height--logo-scale--m:  Header height when logo scale is set to 'm'. Default value is 70px.
+  */
+  --instant-apps-header-height--logo-scale--m: 70px;
+  /**
+  * @prop --instant-apps-header-logo-width--logo-scale--m: Logo width when logo scale is set to 'm'. Default value: 50px.
+  */
+  --instant-apps-header-logo-width--logo-scale--m: 50px;
+  /**
+  * @prop  --instant-apps-header-logo-height--logo-scale--m: Logo height when logo scale is set to 'm'. Default value: 50px.
+  */
+  --instant-apps-header-logo-height--logo-scale--m: 50px;
+  /**
+  * @prop  --instant-apps-header-height--logo-scale--l:  Header height when logo scale is set to 'l'. Default value is 80px.
+  */
+  --instant-apps-header-height--logo-scale--l: 80px;
+  /**
+  * @prop  --instant-apps-header-logo-width--logo-scale--l: Logo width when logo scale is set to 'l'. Default value: 60px.
+  */
+  --instant-apps-header-logo-width--logo-scale--l: 60px;
+  /**
+  * @prop --instant-apps-header-logo-height--logo-scale--l: Logo height when logo scale is set to 'l'. Default value: 60px.
+  */
+  --instant-apps-header-logo-height--logo-scale--l: 60px;
+  width: 100%;
+}
+:host .instant-apps-header--standard {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--instant-apps-header-height);
+  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);
+}
+:host .instant-apps-header--standard .instant-apps-header__header-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: inherit;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-container slot {
+  display: flex;
+  height: inherit;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*) {
+  display: flex;
+  min-height: var(--instant-apps-header-min-height);
+  height: var(--instant-apps-header-height);
+}
+:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*) calcite-button {
+  height: 100%;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: inherit;
+  padding: 5px 10px;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content a {
+  display: flex;
+  align-items: center;
+  -webkit-text-decoration: var(--instant-apps-header-title-text-link-decoration);
+          text-decoration: var(--instant-apps-header-title-text-link-decoration);
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content a img {
+  padding-right: 0;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content img {
+  margin: 10px;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: var(--calcite-color-text-1);
+  font-weight: 430;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content #infoButton {
+  margin-inline-start: 10px;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content--center {
+  justify-content: center;
+}
+:host .instant-apps-header--standard .instant-apps-header__header-content--right {
+  justify-content: end;
+}
+:host .instant-apps-header__logo-height--s {
+  height: var(--instant-apps-header-height--logo-scale--s);
+}
+:host .instant-apps-header__logo-height--s .instant-apps-header__header-content h1 {
+  font-size: 1.125rem;
+}
+:host .instant-apps-header__logo-scale--s {
+  width: var(--instant-apps-header-logo-width--logo-scale--s);
+  height: var(--instant-apps-header-logo-height--logo-scale--s);
+}
+:host .instant-apps-header__logo-height--m {
+  height: var(--instant-apps-header-height--logo-scale--m);
+}
+:host .instant-apps-header__logo-scale--m {
+  width: var(--instant-apps-header-logo-width--logo-scale--m);
+  height: var(--instant-apps-header-logo-height--logo-scale--m);
+}
+:host .instant-apps-header__logo-height--l {
+  height: var(--instant-apps-header-height--logo-scale--l);
+}
+:host .instant-apps-header__logo-height--l .instant-apps-header__header-content h1 {
+  font-size: 1.375rem;
+}
+:host .instant-apps-header__logo-scale--l {
+  width: var(--instant-apps-header-logo-width--logo-scale--l);
+  height: var(--instant-apps-header-logo-height--logo-scale--l);
+}
+:host .instant-apps-header__logo-height--s,
+:host .instant-apps-header__logo-height--m,
+:host .instant-apps-header__logo-height--l {
+  padding-right: 10px;
+}
+:host .instant-apps-header--rtl.instant-apps-header__logo-height--s,
+:host .instant-apps-header--rtl.instant-apps-header__logo-height--m,
+:host .instant-apps-header--rtl.instant-apps-header__logo-height--l {
+  padding-right: 0;
+  padding-left: 10px;
+}

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

@@ -0,0 +1,124 @@
+:host {
+  display: block;
+  --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-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-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-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;
+}
+:host .esri-legend__service {
+  padding: 0;
+}
+:host .esri-legend__layer-body,
+:host .esri-legend__layer,
+:host .esri-legend__layer-table,
+:host .esri-legend__group-layer-child,
+:host .esri-legend__layer-child-table {
+  margin: 0;
+  overflow: hidden;
+}
+:host .esri-legend__layer-caption {
+  display: flex;
+  align-items: center;
+  font-size: var(--instant-apps-interactive-legend-field-name-font-size);
+  background-color: var(--instant-apps-interactive-legend-secondary-background-color);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host .esri-legend__layer-caption calcite-action {
+  margin-right: 5px;
+}
+:host .instant-apps-interactive-legend__layer-caption-btn-container {
+  white-space: nowrap;
+}
+:host .instant-apps-interactive-legend__layer-caption-btn-container calcite-button {
+  margin: 2px;
+}
+:host .esri-legend__layer-caption {
+  font-weight: var(--instant-apps-interactive-legend-caption-font-weight);
+}
+:host .esri-legend__layer-cell.esri-legend__layer-cell--info {
+  font-size: var(--instant-apps-interactive-legend-info-font-size);
+  text-align: left;
+}
+:host .esri-legend__layer-cell,
+:host .esri-legend__layer-row {
+  display: flex;
+  align-items: center;
+}
+:host .instant-apps-interactive-legend__non-interactive .esri-legend__layer-body {
+  display: block;
+  margin: var(--instant-apps-interactive-legend-ui-margin);
+}
+:host .instant-apps-interactive-legend__non-interactive.instant-apps-interactive-legend__nested-unique-symbol > .esri-legend__layer-body {
+  margin: 0;
+}
+:host .instant-apps-interactive-legend__non-interactive .esri-legend__layer-row {
+  display: table-row;
+}
+:host .instant-apps-interactive-legend__non-interactive .esri-legend__layer-cell {
+  display: table-cell;
+}
+:host .esri-legend__layer-cell--symbols {
+  justify-content: center;
+  width: 20%;
+}
+:host .esri-legend__layer-cell--info {
+  width: 65%;
+}
+:host .instant-apps-interactive-legend__layer-row--interactive {
+  margin: 1px;
+  background: transparent;
+  border: none;
+  width: 100%;
+}
+:host .esri-legend__layer-cell--info {
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host .esri-legend__layer-row,
+:host .esri-legend__layer-caption {
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+}
+:host .instant-apps-interactive-legend__layer-row--interactive {
+  position: relative;
+}
+:host .instant-apps-interactive-legend-element-info--selected {
+  background-color: var(--instant-apps-interactive-legend-info-item-background--selected);
+}
+:host .calcite-mode-dark .instant-apps-interactive-legend-element-info--selected {
+  cursor: pointer;
+  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-color-text-inverse);
+}
+:host .hide {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  :host .instant-apps-interactive-legend__layer-row--interactive {
+    cursor: pointer;
+  }
+  :host .instant-apps-interactive-legend__layer-row--interactive:hover {
+    background-color: var(--instant-apps-interactive-legend-info-item-background--hover);
+  }
+  :host .instant-apps-interactive-legend__layer-row--interactive:hover.instant-apps-interactive-legend-element-info--selected {
+    background-color: #e2f2fe;
+  }
+  :host .calcite-mode-dark .instant-apps-interactive-legend__layer-row--interactive:hover {
+    background-color: var(--instant-apps-interactive-legend-info-item-background--hover--dark);
+  }
+  :host .calcite-mode-dark .instant-apps-interactive-legend__layer-row--interactive:hover.instant-apps-interactive-legend-element-info--selected {
+    background-color: #26a9f4;
+  }
+}

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

@@ -0,0 +1,18 @@
+:host {
+  display: flex;
+  align-items: center;
+}
+
+.instant-apps-interactive-legend__info-count-text {
+  font-size: var(--instant-apps-interactive-legend-info-font-size);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+
+.calcite-mode-dark.instant-apps-interactive-legend__info-count-text.instant-apps-interactive-legend__info-count-text--selected {
+  color: var(--calcite-color-text-inverse);
+}
+
+html[dir=rtl] :host {
+  margin-left: 0;
+  margin-right: auto;
+}

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

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+:host .esri-legend__service {
+  margin: 0;
+  padding: 0;
+}
+:host .hide {
+  display: none;
+}

package/packages/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

@@ -0,0 +1,65 @@
+:host {
+  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-color-text-1);
+  --instant-apps-interactive-legend-ui-padding: 15px 10px;
+}
+:host .esri-widget__heading {
+  overflow: hidden;
+  margin: 0;
+  overflow-x: hidden;
+  display: inline-block;
+  font-size: var(--instant-apps-interactive-legend-heading-font-size);
+  font-weight: var(--instant-apps-interactive-legend-heading-font-weight);
+}
+:host .esri-widget__heading header {
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+}
+:host header {
+  display: flex;
+  text-align: left;
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+  background-color: var(--instant-apps-interactive-legend-secondary-background-color);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host header h3 {
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -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 */
+  line-clamp: 2;
+}
+:host header span {
+  width: 100%;
+  font-size: var(--instant-apps-interactive-legend-total-feature-count-font-size);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host header .instant-apps-interactive-legend__header-action-container {
+  display: flex;
+  align-items: center;
+}
+:host .esri-widget__heading header {
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+}
+:host .esri-widget--panel {
+  margin: 0;
+}
+
+:host(.calcite-mode-dark) .instant-apps-interactive-legend__header {
+  background-color: #242424;
+  color: var(--calcite-color-text-1);
+}
+
+:host(.calcite-mode-light) .instant-apps-interactive-legend__header {
+  background-color: #ffffff;
+  color: var(--calcite-color-text-1);
+}

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

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+}
+:host .esri-legend__service {
+  padding: 0;
+}
+:host .esri-legend__layer-body,
+:host .esri-legend__layer,
+:host .esri-legend__layer-table,
+:host .esri-legend__group-layer-child,
+:host .esri-legend__layer-child-table {
+  margin: 0;
+  overflow: hidden;
+}
+:host .hide {
+  display: none;
+}

package/packages/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

@@ -0,0 +1,66 @@
+:host {
+  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-color-text-1);
+  --instant-apps-interactive-legend-ui-padding: 15px 10px;
+}
+:host .esri-widget__heading {
+  overflow: hidden;
+  margin: 0;
+  overflow-x: hidden;
+  display: inline-block;
+  font-size: var(--instant-apps-interactive-legend-heading-font-size);
+  font-weight: var(--instant-apps-interactive-legend-heading-font-weight);
+}
+:host .esri-widget__heading header {
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+}
+:host header {
+  display: flex;
+  text-align: left;
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+  background-color: var(--instant-apps-interactive-legend-secondary-background-color);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host header h3 {
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -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);
+  margin-bottom: 5px;
+}
+:host header .instant-apps-interactive-legend__heading-text--group-item {
+  -webkit-line-clamp: 2; /* number of lines to show */
+  line-clamp: 2;
+}
+:host header span {
+  width: 100%;
+  font-size: var(--instant-apps-interactive-legend-total-feature-count-font-size);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host header .instant-apps-interactive-legend__header-action-container {
+  display: flex;
+  align-items: center;
+}
+:host .esri-widget__heading header {
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+}
+:host .esri-widget--panel {
+  margin: 0;
+}
+
+:host(.calcite-mode-dark) .instant-apps-interactive-legend__header {
+  background-color: #242424;
+  color: var(--calcite-color-text-1);
+}
+
+:host(.calcite-mode-light) .instant-apps-interactive-legend__header {
+  background-color: #ffffff;
+  color: var(--calcite-color-text-1);
+}

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

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+:host .esri-legend__layer-table,
+:host .instant-apps-interactive-legend__nested-unique-symbol {
+  margin: 0;
+}
+:host .hide {
+  display: none;
+}

package/packages/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

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+  --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-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-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 {
+  display: flex;
+  align-items: center;
+  font-size: var(--instant-apps-interactive-legend-field-name-font-size);
+  background-color: var(--instant-apps-interactive-legend-secondary-background-color);
+  color: var(--instant-apps-interactive-legend-secondary-color);
+}
+:host .esri-legend__layer-caption calcite-action {
+  margin-left: 20px;
+}
+:host .instant-apps-interactive-legend__legend-layer-caption-text {
+  display: inline-block;
+  margin-left: 5px;
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: normal;
+}
+:host .instant-apps-interactive-legend__layer-caption-btn-container {
+  white-space: nowrap;
+}
+:host .instant-apps-interactive-legend__layer-caption-btn-container calcite-button {
+  margin: 2px;
+}
+:host .esri-legend__layer-caption {
+  font-weight: var(--instant-apps-interactive-legend-caption-font-weight);
+  padding: var(--instant-apps-interactive-legend-ui-padding);
+}
+
+html[dir=rtl] :host .esri-legend__layer-caption calcite-action {
+  margin-left: unset;
+  margin-right: 20px;
+}

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

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+:host .instant-apps-interactive-legend-relationship__instructional-text {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 10px;
+  background-color: #d2e9f9;
+}
+
+.calcite-mode-dark :host .instant-apps-interactive-legend-relationship__instructional-text {
+  background-color: var(--calcite-color-brand);
+  color: #151515;
+}

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

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  height: 100%;
+}
+:host .esri-legend {
+  height: 100%;
+  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;
+}