@esri/solutions-components 0.6.15 → 0.6.17

package/dist/components/pagination.js

@@ -0,0 +1,249 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.8.0
+ */
+const CSS = {
+  page: "page",
+  selected: "is-selected",
+  previous: "previous",
+  next: "next",
+  disabled: "is-disabled",
+  ellipsis: "ellipsis",
+  ellipsisStart: "ellipsis--start",
+  ellipsisEnd: "ellipsis--end",
+};
+
+const paginationCss = ":host([scale=s]){--calcite-pagination-spacing-internal:0.25rem 0.5rem}:host([scale=s]) .previous,:host([scale=s]) .next,:host([scale=s]) .page{block-size:1.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .previous,:host([scale=s]) .next{padding-inline:0.25rem}:host([scale=m]){--calcite-pagination-spacing-internal:0.5rem 0.75rem}:host([scale=m]) .previous,:host([scale=m]) .next,:host([scale=m]) .page{block-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .previous,:host([scale=m]) .next{padding-inline:0.5rem}:host([scale=l]){--calcite-pagination-spacing-internal:0.75rem 1rem}:host([scale=l]) .previous,:host([scale=l]) .next,:host([scale=l]) .page{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .previous,:host([scale=l]) .next{padding-inline:1rem}:host{display:flex;writing-mode:horizontal-tb}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.previous,.next,.page{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;border-style:none;--tw-border-opacity:0;background-color:transparent;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3);border-block:2px solid transparent}.previous:hover,.next:hover,.page:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-ui-border-2)}.page.is-selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}.previous:hover,.next:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}.previous:active,.next:active{background-color:var(--calcite-ui-foreground-3)}.previous.is-disabled,.next.is-disabled{pointer-events:none;background-color:transparent}.previous.is-disabled>calcite-icon,.next.is-disabled>calcite-icon{opacity:var(--calcite-ui-opacity-disabled)}.next{margin-inline-end:0px}.page,.ellipsis{padding:var(--calcite-pagination-spacing-internal)}.ellipsis{display:flex;align-items:flex-end;color:var(--calcite-ui-text-3)}:host([hidden]){display:none}[hidden]{display:none}";
+
+const maxPagesDisplayed = 5;
+const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 6);
+    this.previousClicked = () => {
+      this.previousPage().then();
+      this.emitUpdate();
+    };
+    this.nextClicked = () => {
+      this.nextPage();
+      this.emitUpdate();
+    };
+    this.groupSeparator = false;
+    this.messageOverrides = undefined;
+    this.pageSize = 20;
+    this.numberingSystem = undefined;
+    this.startItem = 1;
+    this.totalItems = 0;
+    this.scale = "m";
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+    this.messages = undefined;
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  effectiveLocaleWatcher() {
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      useGrouping: this.groupSeparator,
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  async componentWillLoad() {
+    await setUpMessages(this);
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component's first focusable element. */
+  async setFocus() {
+    await componentFocusable(this);
+    this.el.focus();
+  }
+  /** Go to the next page of results. */
+  async nextPage() {
+    this.startItem = Math.min(this.getLastStart(), this.startItem + this.pageSize);
+  }
+  /** Go to the previous page of results. */
+  async previousPage() {
+    this.startItem = Math.max(1, this.startItem - this.pageSize);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  getLastStart() {
+    const { totalItems, pageSize } = this;
+    const lastStart = totalItems % pageSize === 0
+      ? totalItems - pageSize
+      : Math.floor(totalItems / pageSize) * pageSize;
+    return lastStart + 1;
+  }
+  showLeftEllipsis() {
+    return Math.floor(this.startItem / this.pageSize) > 3;
+  }
+  showRightEllipsis() {
+    return (this.totalItems - this.startItem) / this.pageSize > 3;
+  }
+  emitUpdate() {
+    this.calcitePaginationChange.emit();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderPages() {
+    const lastStart = this.getLastStart();
+    let end;
+    let nextStart;
+    // if we don't need ellipses render the whole set
+    if (this.totalItems / this.pageSize <= maxPagesDisplayed) {
+      nextStart = 1 + this.pageSize;
+      end = lastStart - this.pageSize;
+    }
+    else {
+      // if we're within max pages of page 1
+      if (this.startItem / this.pageSize < maxPagesDisplayed - 1) {
+        nextStart = 1 + this.pageSize;
+        end = 1 + 4 * this.pageSize;
+      }
+      else {
+        // if we're within max pages of last page
+        if (this.startItem + 3 * this.pageSize >= this.totalItems) {
+          nextStart = lastStart - 4 * this.pageSize;
+          end = lastStart - this.pageSize;
+        }
+        else {
+          nextStart = this.startItem - this.pageSize;
+          end = this.startItem + this.pageSize;
+        }
+      }
+    }
+    const pages = [];
+    while (nextStart <= end) {
+      pages.push(nextStart);
+      nextStart = nextStart + this.pageSize;
+    }
+    return pages.map((page) => this.renderPage(page));
+  }
+  renderPage(start) {
+    const page = Math.floor(start / this.pageSize) + (this.pageSize === 1 ? 0 : 1);
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      useGrouping: this.groupSeparator,
+    };
+    const displayedPage = numberStringFormatter.localize(page.toString());
+    const selected = start === this.startItem;
+    return (h("button", { "aria-current": selected ? "page" : "false", class: {
+        [CSS.page]: true,
+        [CSS.selected]: selected,
+      }, onClick: () => {
+        this.startItem = start;
+        this.emitUpdate();
+      } }, displayedPage));
+  }
+  renderLeftEllipsis() {
+    if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showLeftEllipsis()) {
+      return h("span", { class: `${CSS.ellipsis} ${CSS.ellipsisStart}` }, "\u2026");
+    }
+  }
+  renderRightEllipsis() {
+    if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showRightEllipsis()) {
+      return h("span", { class: `${CSS.ellipsis} ${CSS.ellipsisEnd}` }, "\u2026");
+    }
+  }
+  render() {
+    const { totalItems, pageSize, startItem } = this;
+    const prevDisabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
+    const nextDisabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
+    return (h(Fragment, null, h("button", { "aria-label": this.messages.previous, class: {
+        [CSS.previous]: true,
+        [CSS.disabled]: prevDisabled,
+      }, disabled: prevDisabled, onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: this.scale === "l" ? "m" : "s" })), totalItems > pageSize ? this.renderPage(1) : null, this.renderLeftEllipsis(), this.renderPages(), this.renderRightEllipsis(), this.renderPage(this.getLastStart()), h("button", { "aria-label": this.messages.next, class: {
+        [CSS.next]: true,
+        [CSS.disabled]: nextDisabled,
+      }, disabled: nextDisabled, onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: this.scale === "l" ? "m" : "s" }))));
+  }
+  static get delegatesFocus() { return true; }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange", "effectiveLocaleWatcher"]
+  }; }
+  static get style() { return paginationCss; }
+}, [17, "calcite-pagination", {
+    "groupSeparator": [516, "group-separator"],
+    "messageOverrides": [1040],
+    "pageSize": [514, "page-size"],
+    "numberingSystem": [1, "numbering-system"],
+    "startItem": [1538, "start-item"],
+    "totalItems": [514, "total-items"],
+    "scale": [513],
+    "messages": [1040],
+    "defaultMessages": [32],
+    "effectiveLocale": [32],
+    "setFocus": [64],
+    "nextPage": [64],
+    "previousPage": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-pagination", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pagination);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Pagination as P, defineCustomElement as d };

package/dist/components/panel.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { h as slotChangeHasAssignedElement, e as slotChangeGetAssignedElements, j as focusFirstTabbable, t as toAriaBoolean } from './dom.js';
+import { j as slotChangeHasAssignedElement, h as slotChangeGetAssignedElements, k as focusFirstTabbable, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
@@ -21,7 +21,7 @@ import { d as defineCustomElement$1 } from './scrim.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   actionBarContainer: "action-bar-container",
@@ -249,7 +249,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
     const { close, hasEndActions, messages, closable, hasMenuItems } = this;
     const text = messages.close;
     const closableNode = closable ? (h("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS.close, onClick: close, text: text, title: text,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setCloseRef })) : null;
     const slotNode = (h("slot", { name: SLOTS.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
     const showContainer = hasEndActions || closableNode || hasMenuItems;
@@ -278,7 +278,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
   }
   renderContent() {
     return (h("div", { class: CSS.contentWrapper, onScroll: this.panelScrollHandler,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setPanelScrollEl }, h("slot", null), this.renderFab()));
   }
   renderFab() {
@@ -287,7 +287,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
   render() {
     const { loading, panelKeyDownHandler, closed, closable } = this;
     const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerRef }, this.renderHeaderNode(), this.renderContent(), this.renderFooterNode()));
     return (h(Fragment, null, loading ? h("calcite-scrim", { loading: loading }) : null, panelNode));
   }

package/dist/components/pick-list-item.js

@@ -10,7 +10,7 @@ import { c as connectInteractive, d as disconnectInteractive, u as updateHostInt
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
-import { I as ICON_TYPES } from './resources3.js';
+import { I as ICON_TYPES } from './resources4.js';
 import { d as defineCustomElement$3 } from './action.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   actions: "actions",
@@ -200,7 +200,7 @@ const PickListItem = /*@__PURE__*/ proxyCustomElement(class PickListItem extends
   render() {
     const { description, label } = this;
     return (h(Fragment, null, this.renderIcon(), this.renderActionsStart(), h("label", { "aria-label": label, class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (focusEl) => (this.focusEl = focusEl) }, h("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS.textContainer, role: "menuitemcheckbox" }, h("span", { class: CSS.title }, label), description ? h("span", { class: CSS.description }, description) : null)), this.renderActionsEnd()));
   }
   static get assetsDirs() { return ["assets"]; }

package/dist/components/popover.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
-import { i as isPrimaryPointerButton, t as toAriaBoolean, j as focusFirstTabbable, q as queryElementRoots } from './dom.js';
+import { i as isPrimaryPointerButton, t as toAriaBoolean, k as focusFirstTabbable, q as queryElementRoots } from './dom.js';
 import { g as guid } from './guid.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { H as Heading } from './Heading.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   container: "container",
@@ -43,7 +43,7 @@ const ARIA_EXPANDED = "aria-expanded";
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 class PopoverManager {
   constructor() {
@@ -372,7 +372,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
   renderCloseButton() {
     const { messages, closable } = this;
     return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
@@ -385,13 +385,13 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !pointerDisabled ? (h(FloatingArrow, { floatingLayout: floatingLayout, key: "floating-arrow",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeArrowEl })) : null;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, arrowNode, h("div", { class: {
         [CSS.hasHeader]: !!heading,
         [CSS.container]: true,

package/dist/components/resources.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";

package/dist/components/resources2.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 var KindIcons;
 (function (KindIcons) {

package/dist/components/resources3.js

@@ -6,19 +6,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
-  sticky: "sticky-pos",
-};
-var ICON_TYPES;
-(function (ICON_TYPES) {
-  ICON_TYPES["circle"] = "circle";
-  ICON_TYPES["square"] = "square";
-  ICON_TYPES["grip"] = "grip";
-})(ICON_TYPES || (ICON_TYPES = {}));
-const SLOTS = {
-  menuActions: "menu-actions",
+  container: "container",
+  containerLink: "container--link",
+  containerMulti: "container--multi-selection",
+  containerSingle: "container--single-selection",
+  containerNone: "container--none-selection",
+  icon: "dropdown-item-icon",
+  iconEnd: "dropdown-item-icon-end",
+  iconStart: "dropdown-item-icon-start",
+  itemContent: "dropdown-item-content",
+  link: "dropdown-link",
 };
 
-export { CSS as C, ICON_TYPES as I, SLOTS as S };
+export { CSS as C };

package/dist/components/resources4.js

@@ -6,15 +6,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
-  heading: "heading",
-  container: "container",
-  indented: "container--indented",
+  sticky: "sticky-pos",
 };
+var ICON_TYPES;
+(function (ICON_TYPES) {
+  ICON_TYPES["circle"] = "circle";
+  ICON_TYPES["square"] = "square";
+  ICON_TYPES["grip"] = "grip";
+})(ICON_TYPES || (ICON_TYPES = {}));
 const SLOTS = {
-  parentItem: "parent-item",
+  menuActions: "menu-actions",
 };
 
-export { CSS as C, SLOTS as S };
+export { CSS as C, ICON_TYPES as I, SLOTS as S };

package/dist/components/resources5.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.8.0
+ */
+const CSS = {
+  heading: "heading",
+  container: "container",
+  indented: "container--indented",
+};
+const SLOTS = {
+  parentItem: "parent-item",
+};
+
+export { CSS as C, SLOTS as S };

package/dist/components/scrim.js

@@ -7,13 +7,13 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as createObserver } from './observers.js';
-import { u as slotChangeHasContent } from './dom.js';
+import { v as slotChangeHasContent } from './dom.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   scrim: "scrim",

package/dist/components/segmented-control-item.js

@@ -4,13 +4,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { y as getElementProp, t as toAriaBoolean } from './dom.js';
+import { t as toAriaBoolean } from './dom.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const SLOTS = {
   input: "input",
@@ -32,15 +32,20 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.value = undefined;
+    this.appearance = "solid";
+    this.layout = "horizontal";
+    this.scale = "m";
   }
   handleCheckedChange() {
     this.calciteInternalSegmentedControlItemChange.emit();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   render() {
-    const { checked, value } = this;
-    const scale = getElementProp(this.el, "scale", "m");
-    const appearance = getElementProp(this.el, "appearance", "solid");
-    const layout = getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { class: {
@@ -62,7 +67,10 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
     "iconFlipRtl": [516, "icon-flip-rtl"],
     "iconStart": [513, "icon-start"],
     "iconEnd": [513, "icon-end"],
-    "value": [1032]
+    "value": [1032],
+    "appearance": [1],
+    "layout": [1],
+    "scale": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/segmented-control.js

@@ -9,6 +9,7 @@ import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { c as createObserver } from './observers.js';
 
 const segmentedControlCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -31,17 +32,21 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = createObserver("mutation", () => this.setUpItems());
     this.appearance = "solid";
     this.disabled = false;
     this.form = undefined;
     this.required = false;
-    this.layout = "horizontal";
     this.name = undefined;
+    this.layout = "horizontal";
     this.scale = "m";
     this.value = null;
     this.selectedItem = undefined;
     this.width = "auto";
   }
+  handlePropsChange() {
+    this.handleItemPropChange();
+  }
   valueHandler(value) {
     const items = this.getItems();
     items.forEach((item) => (item.checked = item.value === value));
@@ -67,28 +72,26 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
   //--------------------------------------------------------------------------
   componentWillLoad() {
     setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
+    this.setUpItems();
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
     setComponentLoaded(this);
   }
   connectedCallback() {
+    var _a;
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
+    var _a;
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.el);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -156,6 +159,14 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
     await componentFocusable(this);
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  handleItemPropChange() {
+    const items = this.getItems();
+    items.forEach((item) => {
+      item.appearance = this.appearance;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -191,8 +202,21 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
       match.focus();
     }
   }
+  setUpItems() {
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
   get el() { return this; }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -202,8 +226,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
     "disabled": [516],
     "form": [513],
     "required": [516],
-    "layout": [513],
     "name": [513],
+    "layout": [513],
     "scale": [513],
     "value": [1025],
     "selectedItem": [1040],