@esri/solutions-components 0.6.1 → 0.6.3

package/dist/esm/calcite-filter_5.entry.js

@@ -1,957 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, H as Host } from './index-d298aca9.js';
-import { f as filter } from './filter-7398e869.js';
-import { u as updateHostInteraction } from './interactive-b1987dfd.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-e6dce690.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-aabc8f45.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-a539118a.js';
-import { d as debounce } from './debounce-4c884e5c.js';
-import { t as toAriaBoolean, s as slotChangeHasAssignedElement, b as getElementDir, g as getElementProp } from './dom-0fc13266.js';
-import { c as createObserver } from './observers-81c91acd.js';
-import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS, g as getDepth, I as ICONS$1, C as CSS$3, S as SLOTS$1 } from './utils-dbb88f30.js';
-import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-cd8d9adb.js';
-import { c as connectLabel, d as disconnectLabel } from './label-5af7aec9.js';
-import './key-218d8d4d.js';
-import './guid-2069664e.js';
-import './resources-e83f65b3.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
- */
-const CSS$2 = {
-  container: "container",
-  searchIcon: "search-icon"
-};
-const ICONS = {
-  search: "search",
-  close: "x"
-};
-const DEBOUNCE_TIMEOUT = 250;
-
-const filterCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{-webkit-margin-after:0.25rem;margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);-webkit-padding-end:0.25rem;padding-inline-end:0.25rem;-webkit-padding-start:1.5rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-ui-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-ui-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}";
-
-const Filter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.filter = debounce((value, emit = false) => this.updateFiltered(filter(this.items, value), emit), DEBOUNCE_TIMEOUT);
-    this.inputHandler = (event) => {
-      const target = event.target;
-      this.value = target.value;
-      this.filter(target.value, true);
-    };
-    this.keyDownHandler = (event) => {
-      if (event.key === "Escape") {
-        this.clear();
-        event.preventDefault();
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-      }
-    };
-    this.clear = () => {
-      this.value = "";
-      this.filter("", true);
-      this.setFocus();
-    };
-    this.items = [];
-    this.disabled = false;
-    this.filteredItems = [];
-    this.placeholder = undefined;
-    this.scale = "m";
-    this.value = "";
-    this.messages = undefined;
-    this.messageOverrides = undefined;
-    this.effectiveLocale = undefined;
-    this.defaultMessages = undefined;
-  }
-  watchItemsHandler() {
-    this.filter(this.value);
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  valueHandler(value) {
-    this.filter(value);
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    this.updateFiltered(filter(this.items, this.value));
-    await setUpMessages(this);
-  }
-  connectedCallback() {
-    connectLocalized(this);
-    connectMessages(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  disconnectedCallback() {
-    disconnectLocalized(this);
-    disconnectMessages(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    await componentLoaded(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  updateFiltered(filtered, emit = false) {
-    this.filteredItems.length = 0;
-    this.filteredItems = this.filteredItems.concat(filtered);
-    if (emit) {
-      this.calciteFilterChange.emit();
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    const { disabled, scale } = this;
-    return (h(Fragment, null, h("div", { class: CSS$2.container }, h("label", null, h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => {
-        this.textInput = el;
-      } })))));
-  }
-  static get delegatesFocus() { return true; }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "items": ["watchItemsHandler"],
-    "messageOverrides": ["onMessagesChange"],
-    "value": ["valueHandler"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-};
-Filter.style = filterCss;
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
- */
-const CSS$1 = {
-  container: "container",
-  table: "table",
-  scrim: "scrim",
-  tableContainer: "table-container",
-  sticky: "sticky-pos"
-};
-const debounceTimeout = 100;
-
-const listCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{position:relative;z-index:1;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}::slotted(calcite-list-item){-webkit-margin-after:1px;margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:300}calcite-filter{-webkit-margin-after:1px;margin-block-end:1px}";
-
-const listItemSelector = "calcite-list-item";
-const List = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
-    this.listItems = [];
-    this.enabledListItems = [];
-    this.mutationObserver = createObserver("mutation", () => this.updateListItems());
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.handleDefaultSlotChange = (event) => {
-      updateListItemChildren(getListItemChildren(event));
-    };
-    this.setActiveListItem = () => {
-      const { enabledListItems } = this;
-      if (!enabledListItems.some((item) => item.active)) {
-        if (enabledListItems[0]) {
-          enabledListItems[0].active = true;
-        }
-      }
-    };
-    this.updateSelectedItems = debounce(() => {
-      this.selectedItems = this.enabledListItems.filter((item) => item.selected);
-    }, debounceTimeout);
-    this.updateFilteredItems = debounce(() => {
-      const { listItems, filteredData, filterText } = this;
-      const values = filteredData.map((item) => item.value);
-      const groups = new Set();
-      const filteredItems = (listItems === null || listItems === void 0 ? void 0 : listItems.filter((item) => {
-        const parent = item.parentElement;
-        const grouped = parent.matches("calcite-list-item-group");
-        if (grouped) {
-          groups.add(parent);
-        }
-        const matches = filterText ? values.includes(item.value) : true;
-        item.hidden = !matches;
-        return matches;
-      })) || [];
-      this.filteredItems = filteredItems;
-      groups.forEach((group) => {
-        const hasAtLeastOneMatch = filteredItems.some((item) => group.contains(item));
-        group.hidden = !hasAtLeastOneMatch;
-        if (!hasAtLeastOneMatch) {
-          return;
-        }
-        const parentItem = group.closest("calcite-list-item");
-        if (parentItem) {
-          parentItem.hidden = false;
-          if (filteredItems.includes(parentItem)) {
-            Array.from(group.querySelectorAll("calcite-list-item")).forEach((child) => (child.hidden = false));
-          }
-        }
-      });
-      groups.clear();
-    });
-    this.handleFilter = (event) => {
-      event.stopPropagation();
-      const { filteredItems, value } = event.currentTarget;
-      this.filteredData = filteredItems;
-      this.filterText = value;
-      this.updateFilteredItems();
-      this.calciteListFilter.emit();
-    };
-    this.getItemData = () => {
-      return this.listItems.map((item) => ({
-        label: item.label,
-        description: item.description,
-        metadata: item.metadata,
-        value: item.value
-      }));
-    };
-    this.queryListItems = () => {
-      return Array.from(this.el.querySelectorAll(listItemSelector));
-    };
-    this.focusRow = (focusEl) => {
-      const { enabledListItems } = this;
-      if (!focusEl) {
-        return;
-      }
-      enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
-      focusEl.setFocus();
-    };
-    this.isNavigable = (listItem) => {
-      var _a;
-      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
-      if (!parentListItemEl) {
-        return true;
-      }
-      return parentListItemEl.open && this.isNavigable(parentListItemEl);
-    };
-    this.handleListKeydown = (event) => {
-      const { key } = event;
-      const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
-      const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
-      if (key === "ArrowDown") {
-        event.preventDefault();
-        const nextIndex = currentIndex + 1;
-        if (filteredItems[nextIndex]) {
-          this.focusRow(filteredItems[nextIndex]);
-        }
-      }
-      else if (key === "ArrowUp") {
-        event.preventDefault();
-        const prevIndex = currentIndex - 1;
-        if (filteredItems[prevIndex]) {
-          this.focusRow(filteredItems[prevIndex]);
-        }
-      }
-      else if (key === "Home") {
-        event.preventDefault();
-        const homeItem = filteredItems[0];
-        if (homeItem) {
-          this.focusRow(homeItem);
-        }
-      }
-      else if (key === "End") {
-        event.preventDefault();
-        const endItem = filteredItems[filteredItems.length - 1];
-        if (endItem) {
-          this.focusRow(endItem);
-        }
-      }
-    };
-    this.disabled = false;
-    this.filterEnabled = false;
-    this.filteredItems = [];
-    this.filteredData = [];
-    this.filterPlaceholder = undefined;
-    this.filterText = undefined;
-    this.label = undefined;
-    this.loading = false;
-    this.openable = false;
-    this.selectedItems = [];
-    this.selectionMode = "none";
-    this.selectionAppearance = "icon";
-    this.dataForFilter = [];
-  }
-  handleFilterEnabledChange() {
-    this.updateListItems();
-  }
-  handleSelectionAppearanceChange() {
-    this.updateListItems();
-  }
-  handleCalciteInternalFocusPreviousItem(event) {
-    event.stopPropagation();
-    const { enabledListItems } = this;
-    const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
-    const prevIndex = currentIndex - 1;
-    if (enabledListItems[prevIndex]) {
-      this.focusRow(enabledListItems[prevIndex]);
-    }
-  }
-  handleCalciteListItemActive(event) {
-    const target = event.target;
-    const { listItems } = this;
-    listItems.forEach((listItem) => {
-      listItem.active = listItem === target;
-    });
-  }
-  handleCalciteListItemSelect(event) {
-    const target = event.target;
-    const { listItems, selectionMode } = this;
-    listItems.forEach((listItem) => {
-      if (selectionMode === "single") {
-        listItem.selected = listItem === target;
-      }
-    });
-    this.updateSelectedItems();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    this.updateListItems();
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-    const { filterEl } = this;
-    const filteredItems = filterEl === null || filterEl === void 0 ? void 0 : filterEl.filteredItems;
-    if (filteredItems) {
-      this.filteredData = filteredItems;
-    }
-    this.updateFilteredItems();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component's first focusable element. */
-  async setFocus() {
-    var _a;
-    await componentLoaded(this);
-    (_a = this.enabledListItems.find((listItem) => listItem.active)) === null || _a === void 0 ? void 0 : _a.setFocus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText } = this;
-    return (h("div", { class: CSS$1.container }, loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (h("thead", null, h("tr", { class: { [CSS$1.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilter, placeholder: filterPlaceholder, value: filterText,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.filterEl = el) }))))) : null, h("tbody", { class: CSS$1.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
-  }
-  updateListItems() {
-    const { selectionAppearance, selectionMode } = this;
-    const items = this.queryListItems();
-    items.forEach((item) => {
-      item.selectionAppearance = selectionAppearance;
-      item.selectionMode = selectionMode;
-    });
-    this.listItems = items;
-    this.enabledListItems = items.filter((item) => !item.disabled);
-    if (this.filterEnabled) {
-      this.dataForFilter = this.getItemData();
-    }
-    this.setActiveListItem();
-    this.updateSelectedItems();
-    this.updateFilteredItems();
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "filterEnabled": ["handleFilterEnabledChange"],
-    "selectionMode": ["handleSelectionAppearanceChange"],
-    "selectionAppearance": ["handleSelectionAppearanceChange"]
-  }; }
-};
-List.style = listCss;
-
-const listItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);-webkit-padding-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier));padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{-webkit-border-start:4px solid var(--calcite-ui-brand);border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{-webkit-border-start:4px solid transparent;border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{z-index:300;outline:2px solid var(--calcite-ui-brand)}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}[hidden]{display:none}";
-
-const focusMap = new Map();
-const listSelector = "calcite-list";
-const ListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteListItemSelect = createEvent(this, "calciteListItemSelect", 6);
-    this.calciteInternalListItemSelect = createEvent(this, "calciteInternalListItemSelect", 6);
-    this.calciteInternalListItemActive = createEvent(this, "calciteInternalListItemActive", 6);
-    this.calciteInternalFocusPreviousItem = createEvent(this, "calciteInternalFocusPreviousItem", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.handleContentSlotChange = (event) => {
-      this.hasCustomContent = slotChangeHasAssignedElement(event);
-    };
-    this.handleActionsStartSlotChange = (event) => {
-      this.hasActionsStart = slotChangeHasAssignedElement(event);
-    };
-    this.handleActionsEndSlotChange = (event) => {
-      this.hasActionsEnd = slotChangeHasAssignedElement(event);
-    };
-    this.handleContentStartSlotChange = (event) => {
-      this.hasContentStart = slotChangeHasAssignedElement(event);
-    };
-    this.handleContentEndSlotChange = (event) => {
-      this.hasContentEnd = slotChangeHasAssignedElement(event);
-    };
-    this.handleDefaultSlotChange = (event) => {
-      const { parentListEl } = this;
-      const listItemChildren = getListItemChildren(event);
-      updateListItemChildren(listItemChildren);
-      const openable = !!listItemChildren.length;
-      if (openable && parentListEl && !parentListEl.openable) {
-        parentListEl.openable = true;
-      }
-      this.openable = openable;
-      if (!openable) {
-        this.open = false;
-      }
-    };
-    this.toggleOpen = () => {
-      this.open = !this.open;
-    };
-    this.itemClicked = () => {
-      this.toggleSelected();
-      this.calciteInternalListItemActive.emit();
-    };
-    this.toggleSelected = () => {
-      if (this.disabled) {
-        return;
-      }
-      if (this.selectionMode !== "none") {
-        this.selected = !this.selected;
-      }
-      this.calciteListItemSelect.emit();
-    };
-    this.handleItemKeyDown = (event) => {
-      const { key } = event;
-      const composedPath = event.composedPath();
-      const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
-      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
-      const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
-      if (key === " ") {
-        event.preventDefault();
-        this.toggleSelected();
-      }
-      else if (key === "ArrowRight") {
-        event.preventDefault();
-        const nextIndex = currentIndex + 1;
-        if (currentIndex === -1) {
-          if (!open && openable) {
-            this.open = true;
-            this.focusCell(null);
-          }
-          else if (cells[0]) {
-            this.focusCell(cells[0]);
-          }
-        }
-        else if (cells[currentIndex] && cells[nextIndex]) {
-          this.focusCell(cells[nextIndex]);
-        }
-      }
-      else if (key === "ArrowLeft") {
-        event.preventDefault();
-        const prevIndex = currentIndex - 1;
-        if (currentIndex === -1) {
-          this.focusCell(null);
-          if (open && openable) {
-            this.open = false;
-          }
-          else {
-            this.calciteInternalFocusPreviousItem.emit();
-          }
-        }
-        else if (currentIndex === 0) {
-          this.focusCell(null);
-          containerEl.focus();
-        }
-        else if (cells[currentIndex] && cells[prevIndex]) {
-          this.focusCell(cells[prevIndex]);
-        }
-      }
-    };
-    this.focusCellNull = () => {
-      this.focusCell(null);
-    };
-    this.focusCell = (focusEl, saveFocusIndex = true) => {
-      const { contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
-      if (saveFocusIndex) {
-        focusMap.set(parentListEl, null);
-      }
-      [actionsStartEl, contentEl, actionsEndEl].filter(Boolean).forEach((tableCell, cellIndex) => {
-        const tabIndexAttr = "tabindex";
-        if (tableCell === focusEl) {
-          tableCell.setAttribute(tabIndexAttr, "0");
-          saveFocusIndex && focusMap.set(parentListEl, cellIndex);
-        }
-        else {
-          tableCell.removeAttribute(tabIndexAttr);
-        }
-      });
-      focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
-    };
-    this.active = false;
-    this.description = undefined;
-    this.disabled = false;
-    this.label = undefined;
-    this.metadata = undefined;
-    this.open = false;
-    this.setSize = null;
-    this.setPosition = null;
-    this.selected = false;
-    this.value = undefined;
-    this.selectionMode = null;
-    this.selectionAppearance = null;
-    this.level = null;
-    this.visualLevel = null;
-    this.parentListEl = undefined;
-    this.openable = false;
-    this.hasActionsStart = false;
-    this.hasActionsEnd = false;
-    this.hasCustomContent = false;
-    this.hasContentStart = false;
-    this.hasContentEnd = false;
-  }
-  activeHandler(active) {
-    if (!active) {
-      this.focusCell(null, false);
-    }
-  }
-  handleSelectedChange(value) {
-    if (value) {
-      this.calciteInternalListItemSelect.emit();
-    }
-  }
-  connectedCallback() {
-    const { el } = this;
-    this.parentListEl = el.closest(listSelector);
-    this.level = getDepth(el) + 1;
-    this.visualLevel = getDepth(el, true);
-    this.setSelectionDefaults();
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this, "managed");
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    await componentLoaded(this);
-    const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
-    const focusIndex = focusMap.get(parentListEl);
-    if (typeof focusIndex === "number") {
-      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
-      if (cells[focusIndex]) {
-        this.focusCell(cells[focusIndex]);
-      }
-      else {
-        containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
-      }
-      return;
-    }
-    containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderSelected() {
-    const { selected, selectionMode, selectionAppearance } = this;
-    if (selectionMode === "none" || selectionAppearance === "border") {
-      return null;
-    }
-    return (h("td", { class: CSS$3.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
-        ? selectionMode === "multiple"
-          ? ICONS$1.selectedMultiple
-          : ICONS$1.selectedSingle
-        : ICONS$1.unselected, scale: "s" })));
-  }
-  renderOpen() {
-    const { el, open, openable, parentListEl } = this;
-    const dir = getElementDir(el);
-    return openable ? (h("td", { class: CSS$3.openContainer, key: "open-container", onClick: this.toggleOpen }, h("calcite-icon", { icon: open ? ICONS$1.open : dir === "rtl" ? ICONS$1.closedRTL : ICONS$1.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$3.openContainer, key: "open-container", onClick: this.itemClicked }, h("calcite-icon", { icon: ICONS$1.blank, scale: "s" }))) : null;
-  }
-  renderActionsStart() {
-    const { label, hasActionsStart } = this;
-    return (h("td", { "aria-label": label, class: CSS$3.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS$1.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-  }
-  renderActionsEnd() {
-    const { label, hasActionsEnd } = this;
-    return (h("td", { "aria-label": label, class: CSS$3.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS$1.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
-  }
-  renderContentStart() {
-    const { hasContentStart } = this;
-    return (h("div", { class: CSS$3.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$1.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-  }
-  renderCustomContent() {
-    const { hasCustomContent } = this;
-    return (h("div", { class: CSS$3.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$1.content, onSlotchange: this.handleContentSlotChange })));
-  }
-  renderContentEnd() {
-    const { hasContentEnd } = this;
-    return (h("div", { class: CSS$3.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$1.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-  }
-  renderContentProperties() {
-    const { label, description, hasCustomContent } = this;
-    return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS$3.content, key: "content" }, label ? (h("div", { class: CSS$3.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS$3.description, key: "description" }, description)) : null)) : null;
-  }
-  renderContentContainer() {
-    const { description, label, selectionMode, hasCustomContent } = this;
-    const hasCenterContent = hasCustomContent || !!label || !!description;
-    const content = [
-      this.renderContentStart(),
-      this.renderCustomContent(),
-      this.renderContentProperties(),
-      this.renderContentEnd()
-    ];
-    return (h("td", { "aria-label": label, class: {
-        [CSS$3.contentContainer]: true,
-        [CSS$3.contentContainerSelectable]: selectionMode !== "none",
-        [CSS$3.contentContainerHasCenterContent]: hasCenterContent
-      }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.contentEl = el) }, content));
-  }
-  render() {
-    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode } = this;
-    const showBorder = selectionMode !== "none" && selectionAppearance === "border";
-    const borderSelected = showBorder && selected;
-    const borderUnselected = showBorder && !selected;
-    return (h(Host, null, h("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
-        [CSS$3.container]: true,
-        [CSS$3.containerBorderSelected]: borderSelected,
-        [CSS$3.containerBorderUnselected]: borderUnselected
-      }, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
-        [CSS$3.nestedContainer]: true,
-        [CSS$3.nestedContainerHidden]: openable && !open
-      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
-  }
-  setSelectionDefaults() {
-    const { parentListEl, selectionMode, selectionAppearance } = this;
-    if (!parentListEl) {
-      return;
-    }
-    if (!selectionMode) {
-      this.selectionMode = parentListEl.selectionMode;
-    }
-    if (!selectionAppearance) {
-      this.selectionAppearance = parentListEl.selectionAppearance;
-    }
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "active": ["activeHandler"],
-    "selected": ["handleSelectedChange"]
-  }; }
-};
-ListItem.style = listItemCss;
-
-const segmentedControlCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}: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}";
-
-const SegmentedControl = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteSegmentedControlChange = createEvent(this, "calciteSegmentedControlChange", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    this.handleClick = (event) => {
-      if (event.target.localName === "calcite-segmented-control-item") {
-        this.selectItem(event.target, true);
-      }
-    };
-    this.appearance = "solid";
-    this.disabled = false;
-    this.form = undefined;
-    this.required = false;
-    this.layout = "horizontal";
-    this.name = undefined;
-    this.scale = "m";
-    this.value = null;
-    this.selectedItem = undefined;
-    this.width = "auto";
-  }
-  valueHandler(value) {
-    const items = this.getItems();
-    items.forEach((item) => (item.checked = item.value === value));
-  }
-  handleSelectedItemChange(newItem, oldItem) {
-    this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value;
-    if (newItem === oldItem) {
-      return;
-    }
-    const items = this.getItems();
-    const match = Array.from(items)
-      .filter((item) => item === newItem)
-      .pop();
-    if (match) {
-      this.selectItem(match);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = Array.from(items)
-      .filter((item) => item.checked)
-      .pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
-  }
-  componentDidLoad() {
-    afterConnectDefaultValueSet(this, this.value);
-    setComponentLoaded(this);
-  }
-  connectedCallback() {
-    connectLabel(this);
-    connectForm(this);
-  }
-  disconnectedCallback() {
-    disconnectLabel(this);
-    disconnectForm(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  render() {
-    return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
-  }
-  handleSelected(event) {
-    event.preventDefault();
-    this.selectItem(event.target);
-    event.stopPropagation();
-  }
-  handleKeyDown(event) {
-    const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
-    const { key } = event;
-    const { el, selectedItem } = this;
-    if (keys.indexOf(key) === -1) {
-      return;
-    }
-    let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
-      if (key === "ArrowRight") {
-        adjustedKey = "ArrowLeft";
-      }
-      if (key === "ArrowLeft") {
-        adjustedKey = "ArrowRight";
-      }
-    }
-    const items = this.getItems();
-    let selectedIndex = -1;
-    items.forEach((item, index) => {
-      if (item === selectedItem) {
-        selectedIndex = index;
-      }
-    });
-    switch (adjustedKey) {
-      case "ArrowLeft":
-      case "ArrowUp":
-        event.preventDefault();
-        const previous = selectedIndex < 1 ? items.item(items.length - 1) : items.item(selectedIndex - 1);
-        this.selectItem(previous, true);
-        return;
-      case "ArrowRight":
-      case "ArrowDown":
-        event.preventDefault();
-        const next = selectedIndex === -1 ? items.item(1) : items.item(selectedIndex + 1) || items.item(0);
-        this.selectItem(next, true);
-        return;
-      case " ":
-        event.preventDefault();
-        this.selectItem(event.target, true);
-        return;
-      default:
-        return;
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    var _a;
-    await componentLoaded(this);
-    (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  onLabelClick() {
-    this.setFocus();
-  }
-  getItems() {
-    return this.el.querySelectorAll("calcite-segmented-control-item");
-  }
-  selectItem(selected, emit = false) {
-    if (selected === this.selectedItem) {
-      return;
-    }
-    const items = this.getItems();
-    let match = null;
-    items.forEach((item) => {
-      const matches = item.value === selected.value;
-      if ((matches && !item.checked) || (!matches && item.checked)) {
-        item.checked = matches;
-      }
-      item.tabIndex = matches ? 0 : -1;
-      if (matches) {
-        match = item;
-        if (emit) {
-          this.calciteSegmentedControlChange.emit();
-        }
-      }
-    });
-    this.selectedItem = match;
-    if (match) {
-      match.focus();
-    }
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueHandler"],
-    "selectedItem": ["handleSelectedItemChange"]
-  }; }
-};
-SegmentedControl.style = segmentedControlCss;
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
- */
-const SLOTS = {
-  input: "input"
-};
-const CSS = {
-  segmentedControlItemIcon: "segmented-control-item-icon"
-};
-
-const segmentedControlItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:0.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-ui-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-internal-animation-timing-fast) ease-in-out, color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-1px}.label--scale-s{padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:0.125rem}.label--scale-m{padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:0.375rem}.label--scale-l{padding-inline:1rem;padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host(:active) label{background-color:var(--calcite-ui-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-brand);color:var(--calcite-ui-background)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .segmented-control-item-icon{color:highlightText}}.segmented-control-item-icon{position:relative;margin:0px;display:inline-flex;line-height:inherit}:host([icon-start]) .label--scale-s .segmented-control-item-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([icon-end]) .label--scale-s .segmented-control-item-icon{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-start]) .label--scale-m .segmented-control-item-icon{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([icon-end]) .label--scale-m .segmented-control-item-icon{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}:host([icon-start]) .label--scale-l .segmented-control-item-icon{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([icon-end]) .label--scale-l .segmented-control-item-icon{-webkit-margin-start:1rem;margin-inline-start:1rem}";
-
-const SegmentedControlItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteInternalSegmentedControlItemChange = createEvent(this, "calciteInternalSegmentedControlItemChange", 6);
-    this.checked = false;
-    this.iconFlipRtl = false;
-    this.iconStart = undefined;
-    this.iconEnd = undefined;
-    this.value = undefined;
-  }
-  handleCheckedChange() {
-    this.calciteInternalSegmentedControlItemChange.emit();
-  }
-  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 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: {
-        "label--scale-s": scale === "s",
-        "label--scale-m": scale === "m",
-        "label--scale-l": scale === "l",
-        "label--horizontal": layout === "horizontal",
-        "label--outline": appearance === "outline",
-        "label--outline-fill": appearance === "outline-fill"
-      } }, this.iconStart ? iconStartEl : null, h("slot", null, value), h("slot", { name: SLOTS.input }), this.iconEnd ? iconEndEl : null)));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "checked": ["handleCheckedChange"]
-  }; }
-};
-SegmentedControlItem.style = segmentedControlItemCss;
-
-export { Filter as calcite_filter, List as calcite_list, ListItem as calcite_list_item, SegmentedControl as calcite_segmented_control, SegmentedControlItem as calcite_segmented_control_item };