Update demo

app.js

@@ -117,7 +117,7 @@ require([
  /** Assign a selector to style uniquely */
  /** Add event listeners to filter on after interaction */
  function createFilterChips() {
- allTypes.map((item) => {
+ allTypes.forEach((item) => {
  const chip = document.createElement("calcite-chip");
  const simpleName = item.split(" ")[0];
  const isActive = appState.types.includes(item);
@@ -150,7 +150,7 @@ require([
  let args = [];
  const typesActive = appState.types.length > 0;
  const featureTypes = typesActive ? appState.types : allTypes;
- featureTypes.map((j) => args.push(`'${j}'`));
+ featureTypes.forEach((j) => args.push(`'${j}'`));
  const filtered = ` AND (FEATTYPE = ${args.join(" OR FEATTYPE = ")})`;
  const unfiltered = ` AND FEATTYPE != ${args.join(" AND FEATTYPE != ")}`;
  const argString = typesActive ? filtered : unfiltered;

index.html

@@ -51,24 +51,27 @@ <h1>US Park Finder</h1>
  Calcite Design System" technical session at Esri Developer Summit 2023.
  </span>
  </calcite-notice>
- This example illustrates theming Calcite Components:
+ This example illustrates theming <calcite-link target="_blank"
+ href="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/Esri/calcite-components">
+ Calcite Components</calcite-link>.
  <ul>
  <li>The default Calcite theme variables for both light and dark modes are customized.</li>
  <li>Calcite Chip components are themed programmatically and correspond to attribute values.</li>
  </ul>
- Learn more by reading <calcite-link target="_blank"
+ <calcite-link target="_blank" href="https://developers.arcgis.com/calcite-design-system">
+ Learn more about theming</calcite-link> in the <calcite-link target="_blank"
  href="https://developers.arcgis.com/calcite-design-system">
- Calcite documentation</calcite-link>.
+ Calcite Design System documentation</calcite-link>.
  <hr />
  <calcite-link target="_blank"
  href="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/EsriDevEvents/designing-apps-with-calcite-design-system-2023">Application
- source code</calcite-link> is available at
+ source code</calcite-link> is available in the
  <calcite-link target="_blank" href="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/EsriDevEvents/">Esri Developer Events
- GitHub</calcite-link>.
+ GitHub organization</calcite-link>.
  <hr />
  <calcite-link target="_blank"
  href="https://www.arcgis.com/home/item.html?id=f092c20803a047cba81fbf1e30eff0b5">USA
- Parks data</calcite-link> is sourced from Esri Data and Maps, and available in the
+ Parks data</calcite-link> is sourced from Esri Data and Maps /
  <calcite-link target="_blank" href="https://livingatlas.arcgis.com/en/home/">ArcGIS Living Atlas of the
  World</calcite-link>.
  </div>

style.css

@@ -11,8 +11,8 @@ body,
 /** Setting custom core Calcite theme variables for light (default) and dark modes */
 body {
  --calcite-ui-brand: #3fa659;
- --calcite-ui-foreground-1: #f5fdf7;
- --calcite-ui-foreground-2: #e1f2e6;
+ --calcite-ui-foreground-1: #f6fcf8;
+ --calcite-ui-foreground-2: #e7f2ea;
  --calcite-ui-foreground-3: #ddeee2;
  --calcite-ui-border-3: #d2dfd5;
 }
@@ -77,6 +77,7 @@ body.calcite-mode-dark calcite-modal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
+ padding: 0 0.5rem;
 }
 
 #chips calcite-chip {