@esri/calcite-components 2.2.0-next.0 → 2.2.0-next.2

package/dist/cjs/calcite-filter.cjs.entry.js

@@ -1,25 +1,25 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const filter = require('./filter-84717b3c.js');
-const interactive = require('./interactive-04057cf9.js');
-const loadable = require('./loadable-488230d3.js');
-const locale = require('./locale-f3c5ce8e.js');
-const t9n = require('./t9n-7ada50fb.js');
-const debounce = require('./debounce-5f6f9a5a.js');
-require('./browser-843700f4.js');
-require('./dom-afcc4f08.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./key-f65f1f51.js');
-require('./observers-20febba7.js');
+const index = require('./index-c3a85d17.js');
+const filter = require('./filter-52af3a71.js');
+const interactive = require('./interactive-77fbebed.js');
+const loadable = require('./loadable-3315b101.js');
+const locale = require('./locale-cb432455.js');
+const t9n = require('./t9n-f6dc9b37.js');
+const debounce = require('./debounce-b72abe80.js');
+require('./browser-767f345c.js');
+require('./dom-526ae93a.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./key-c7167eca.js');
+require('./observers-63095bd4.js');
 
 const CSS = {
     container: "container",
@@ -31,7 +31,7 @@ const ICONS = {
 };
 const DEBOUNCE_TIMEOUT = 250;
 
-const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}: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]{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-color-text-1);padding-inline-end:0.25rem;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-color-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-color-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-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.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]{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-color-text-1);padding-inline-end:0.25rem;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-color-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-color-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-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Filter = class {
     constructor(hostRef) {
@@ -42,7 +42,7 @@ const Filter = class {
         //  Private Methods
         //
         // --------------------------------------------------------------------------
-        this.filterDebounced = debounce.debounce((value, emit = false, onFilter) => this.updateFiltered(filter.filter(this.items, value), emit, onFilter), DEBOUNCE_TIMEOUT);
+        this.filterDebounced = debounce.debounce((value, emit = false, onFilter) => this.items.length && this.updateFiltered(filter.filter(this.items, value), emit, onFilter), DEBOUNCE_TIMEOUT);
         this.inputHandler = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -92,7 +92,9 @@ const Filter = class {
     //--------------------------------------------------------------------------
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
-        this.updateFiltered(filter.filter(this.items, this.value));
+        if (this.items.length) {
+            this.updateFiltered(filter.filter(this.items, this.value));
+        }
         await t9n.setUpMessages(this);
     }
     connectedCallback() {
@@ -150,7 +152,7 @@ const Filter = class {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (index.h(index.Fragment, null, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+        return (index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("div", { class: CSS.container }, index.h("label", null, index.h("calcite-input", { clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, 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 should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => {
                 this.textInput = el;

package/dist/cjs/calcite-filter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-filter.entry.cjs.js","mappings":"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","names":["debounce","filter","updateMessages","setUpLoadableComponent","setUpMessages","connectInteractive","connectLocalized","connectMessages","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","componentFocusable","h","Fragment"],"sources":["src/components/filter/resources.ts","src/components/filter/filter.scss?tag=calcite-filter&encapsulation=shadow","src/components/filter/filter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  searchIcon: \"search-icon\",\n};\n\nexport const ICONS = {\n  search: \"search\",\n  close: \"x\",\n};\n\nexport const DEBOUNCE_TIMEOUT = 250;\n",":host {\n  @extend %component-host;\n  @apply flex w-full;\n}\n\n@include disabled();\n\n.container {\n  @apply flex w-full p-2;\n}\n\nlabel {\n  @apply relative\n    mx-1\n    my-0\n    flex w-full\n    items-center\n    overflow-hidden;\n}\n\ninput[type=\"text\"] {\n  @apply font-inherit\n    text-color-1\n    text-n2h\n    mb-1\n    w-full\n    border-none\n    bg-transparent\n    py-1;\n  padding-inline-end: theme(\"spacing.1\");\n  padding-inline-start: theme(\"spacing.6\");\n  transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);\n  &::-ms-clear {\n    @apply hidden;\n  }\n}\n\ncalcite-input {\n  @apply w-full;\n}\n\n.search-icon {\n  @apply text-color-2\n    absolute\n    flex;\n  inset-inline-start: 0;\n  transition: inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing),\n    opacity var(--calcite-animation-timing);\n}\n\ninput[type=\"text\"]:focus {\n  @apply border-color-brand outline-none;\n  padding-inline: theme(\"padding.1\");\n  & ~ .search-icon {\n    inset-inline-start: calc(theme(\"spacing.4\") * -1);\n    @apply opacity-0;\n  }\n}\n\n.clear-button {\n  @apply text-color-2\n    flex\n    cursor-pointer\n    items-center\n    border-0\n    bg-transparent;\n  &:hover,\n  &:focus {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { debounce } from \"lodash-es\";\nimport { filter } from \"../../utils/filter\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { FilterMessages } from \"./assets/filter/t9n\";\nimport { CSS, DEBOUNCE_TIMEOUT, ICONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-filter\",\n  styleUrl: \"filter.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Filter\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Defines the items to filter. The component uses the values as the starting point, and returns items\n   *\n   * that contain the string entered in the input, using a partial match and recursive search.\n   *\n   * This property is needed to conduct filtering.\n   *\n   */\n  @Prop() items: object[] = [];\n\n  @Watch(\"items\")\n  watchItemsHandler(): void {\n    this.filterDebounced(this.value);\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's resulting items after filtering.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: object[] = [];\n\n  /**\n   * Specifies placeholder text for the input element.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FilterMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FilterMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.filterDebounced(value);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State/Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFilterElement;\n\n  textInput: HTMLCalciteInputElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: FilterMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * This event fires when the filter text changes.\n   */\n  @Event({ cancelable: false }) calciteFilterChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.updateFiltered(filter(this.items, this.value));\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.filterDebounced.cancel();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Performs a filter on the component.\n   *\n   * This method can be useful because filtering is delayed and asynchronous.\n   *\n   * @param {string} value - The filter text value.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async filter(value: string = this.value): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = value;\n      this.filterDebounced(value, false, resolve);\n    });\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private filterDebounced = debounce(\n    (value: string, emit = false, onFilter?: () => void): void =>\n      this.updateFiltered(filter(this.items, value), emit, onFilter),\n    DEBOUNCE_TIMEOUT\n  );\n\n  inputHandler = (event: CustomEvent): void => {\n    const target = event.target as HTMLCalciteInputElement;\n    this.value = target.value;\n    this.filterDebounced(target.value, true);\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\") {\n      this.clear();\n      event.preventDefault();\n    }\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  };\n\n  clear = (): void => {\n    this.value = \"\";\n    this.filterDebounced(\"\", true);\n    this.setFocus();\n  };\n\n  updateFiltered(filtered: object[], emit = false, callback?: () => void): void {\n    this.filteredItems = filtered;\n    if (emit) {\n      this.calciteFilterChange.emit();\n    }\n    callback?.();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { disabled, scale } = this;\n\n    return (\n      <Fragment>\n        <div class={CSS.container}>\n          <label>\n            <calcite-input\n              clearable={true}\n              disabled={disabled}\n              icon={ICONS.search}\n              label={this.messages.label}\n              messageOverrides={{ clear: this.messages.clear }}\n              onCalciteInputInput={this.inputHandler}\n              onKeyDown={this.keyDownHandler}\n              placeholder={this.placeholder}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\n              // 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)\n              ref={(el): void => {\n                this.textInput = el;\n              }}\n            />\n          </label>\n        </div>\n      </Fragment>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-filter.entry.cjs.js","mappings":"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","names":["debounce","filter","updateMessages","setUpLoadableComponent","setUpMessages","connectInteractive","connectLocalized","connectMessages","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","componentFocusable","h","InteractiveContainer"],"sources":["src/components/filter/resources.ts","src/components/filter/filter.scss?tag=calcite-filter&encapsulation=shadow","src/components/filter/filter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  searchIcon: \"search-icon\",\n};\n\nexport const ICONS = {\n  search: \"search\",\n  close: \"x\",\n};\n\nexport const DEBOUNCE_TIMEOUT = 250;\n",":host {\n  @extend %component-host;\n  @apply flex w-full;\n}\n\n@include disabled();\n\n.container {\n  @apply flex w-full p-2;\n}\n\nlabel {\n  @apply relative\n    mx-1\n    my-0\n    flex w-full\n    items-center\n    overflow-hidden;\n}\n\ninput[type=\"text\"] {\n  @apply font-inherit\n    text-color-1\n    text-n2h\n    mb-1\n    w-full\n    border-none\n    bg-transparent\n    py-1;\n  padding-inline-end: theme(\"spacing.1\");\n  padding-inline-start: theme(\"spacing.6\");\n  transition: padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);\n  &::-ms-clear {\n    @apply hidden;\n  }\n}\n\ncalcite-input {\n  @apply w-full;\n}\n\n.search-icon {\n  @apply text-color-2\n    absolute\n    flex;\n  inset-inline-start: 0;\n  transition: inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing),\n    opacity var(--calcite-animation-timing);\n}\n\ninput[type=\"text\"]:focus {\n  @apply border-color-brand outline-none;\n  padding-inline: theme(\"padding.1\");\n  & ~ .search-icon {\n    inset-inline-start: calc(theme(\"spacing.4\") * -1);\n    @apply opacity-0;\n  }\n}\n\n.clear-button {\n  @apply text-color-2\n    flex\n    cursor-pointer\n    items-center\n    border-0\n    bg-transparent;\n  &:hover,\n  &:focus {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { debounce } from \"lodash-es\";\nimport { filter } from \"../../utils/filter\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { FilterMessages } from \"./assets/filter/t9n\";\nimport { CSS, DEBOUNCE_TIMEOUT, ICONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-filter\",\n  styleUrl: \"filter.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Filter\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Defines the items to filter. The component uses the values as the starting point, and returns items\n   *\n   * that contain the string entered in the input, using a partial match and recursive search.\n   *\n   * This property is needed to conduct filtering.\n   *\n   */\n  @Prop() items: object[] = [];\n\n  @Watch(\"items\")\n  watchItemsHandler(): void {\n    this.filterDebounced(this.value);\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's resulting items after filtering.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: object[] = [];\n\n  /**\n   * Specifies placeholder text for the input element.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FilterMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FilterMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.filterDebounced(value);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State/Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFilterElement;\n\n  textInput: HTMLCalciteInputElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: FilterMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * This event fires when the filter text changes.\n   */\n  @Event({ cancelable: false }) calciteFilterChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (this.items.length) {\n      this.updateFiltered(filter(this.items, this.value));\n    }\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.filterDebounced.cancel();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Performs a filter on the component.\n   *\n   * This method can be useful because filtering is delayed and asynchronous.\n   *\n   * @param {string} value - The filter text value.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async filter(value: string = this.value): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = value;\n      this.filterDebounced(value, false, resolve);\n    });\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private filterDebounced = debounce(\n    (value: string, emit = false, onFilter?: () => void): void =>\n      this.items.length && this.updateFiltered(filter(this.items, value), emit, onFilter),\n    DEBOUNCE_TIMEOUT\n  );\n\n  inputHandler = (event: CustomEvent): void => {\n    const target = event.target as HTMLCalciteInputElement;\n    this.value = target.value;\n    this.filterDebounced(target.value, true);\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\") {\n      this.clear();\n      event.preventDefault();\n    }\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  };\n\n  clear = (): void => {\n    this.value = \"\";\n    this.filterDebounced(\"\", true);\n    this.setFocus();\n  };\n\n  updateFiltered(filtered: object[], emit = false, callback?: () => void): void {\n    this.filteredItems = filtered;\n    if (emit) {\n      this.calciteFilterChange.emit();\n    }\n    callback?.();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { disabled, scale } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div class={CSS.container}>\n          <label>\n            <calcite-input\n              clearable={true}\n              disabled={disabled}\n              icon={ICONS.search}\n              label={this.messages.label}\n              messageOverrides={{ clear: this.messages.clear }}\n              onCalciteInputInput={this.inputHandler}\n              onKeyDown={this.keyDownHandler}\n              placeholder={this.placeholder}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\n              // 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)\n              ref={(el): void => {\n                this.textInput = el;\n              }}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-flow-item.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const dom = require('./dom-afcc4f08.js');
-const interactive = require('./interactive-04057cf9.js');
-const loadable = require('./loadable-488230d3.js');
-const locale = require('./locale-f3c5ce8e.js');
-const t9n = require('./t9n-7ada50fb.js');
-const resources = require('./resources-51ff7835.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./browser-843700f4.js');
-require('./key-f65f1f51.js');
-require('./observers-20febba7.js');
+const index = require('./index-c3a85d17.js');
+const dom = require('./dom-526ae93a.js');
+const interactive = require('./interactive-77fbebed.js');
+const loadable = require('./loadable-3315b101.js');
+const locale = require('./locale-cb432455.js');
+const t9n = require('./t9n-f6dc9b37.js');
+const resources = require('./resources-847c1e28.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./browser-767f345c.js');
+require('./key-c7167eca.js');
+require('./observers-63095bd4.js');
 
 const CSS = {
     backButton: "back-button",
@@ -38,7 +38,7 @@ const SLOTS = {
     footerActions: "footer-actions",
 };
 
-const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
+const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const FlowItem = class {
     constructor(hostRef) {
@@ -175,9 +175,9 @@ const FlowItem = class {
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
-        return (index.h(index.Host, null, index.h("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle,
+        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle,
             // 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.renderBackButton(), index.h("slot", { name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null))));
+            ref: this.setContainerRef }, this.renderBackButton(), index.h("slot", { name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null)))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/calcite-flow-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-flow-item.entry.cjs.js","mappings":"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","names":["connectInteractive","connectLocalized","connectMessages","setUpMessages","setUpLoadableComponent","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","updateMessages","componentFocusable","getElementDir","h","Host","PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n};\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer - A slot for adding custom content to the component's footer.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: \"down\" | \"up\" = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\n\n  /**\n   *  When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FlowItemMessages;\n\n  /**\n   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handlePanelScroll = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handlePanelClose = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemClose.emit();\n  };\n\n  handlePanelToggle = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n        // 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)\n        ref={this.setBackRef}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n    } = this;\n    return (\n      <Host>\n        <calcite-panel\n          closable={closable}\n          closed={closed}\n          collapseDirection={collapseDirection}\n          collapsed={collapsed}\n          collapsible={collapsible}\n          description={description}\n          disabled={disabled}\n          heading={heading}\n          headingLevel={headingLevel}\n          loading={loading}\n          menuOpen={menuOpen}\n          messageOverrides={messages}\n          onCalcitePanelClose={this.handlePanelClose}\n          onCalcitePanelScroll={this.handlePanelScroll}\n          onCalcitePanelToggle={this.handlePanelToggle}\n          // 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)\n          ref={this.setContainerRef}\n        >\n          {this.renderBackButton()}\n          <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n          <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n          <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n          <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n          <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n          <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n          <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n          <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n          <slot />\n        </calcite-panel>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-flow-item.entry.cjs.js","mappings":"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","names":["connectInteractive","connectLocalized","connectMessages","setUpMessages","setUpLoadableComponent","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","updateMessages","componentFocusable","getElementDir","h","Host","InteractiveContainer","PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n};\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer - A slot for adding custom content to the component's footer.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: \"down\" | \"up\" = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\n\n  /**\n   *  When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FlowItemMessages;\n\n  /**\n   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handlePanelScroll = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handlePanelClose = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemClose.emit();\n  };\n\n  handlePanelToggle = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n        // 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)\n        ref={this.setBackRef}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n    } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <calcite-panel\n            closable={closable}\n            closed={closed}\n            collapseDirection={collapseDirection}\n            collapsed={collapsed}\n            collapsible={collapsible}\n            description={description}\n            disabled={disabled}\n            heading={heading}\n            headingLevel={headingLevel}\n            loading={loading}\n            menuOpen={menuOpen}\n            messageOverrides={messages}\n            onCalcitePanelClose={this.handlePanelClose}\n            onCalcitePanelScroll={this.handlePanelScroll}\n            onCalcitePanelToggle={this.handlePanelToggle}\n            // 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)\n            ref={this.setContainerRef}\n          >\n            {this.renderBackButton()}\n            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n            <slot />\n          </calcite-panel>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-flow.cjs.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const observers = require('./observers-20febba7.js');
-const loadable = require('./loadable-488230d3.js');
+const index = require('./index-c3a85d17.js');
+const observers = require('./observers-63095bd4.js');
+const loadable = require('./loadable-3315b101.js');
 
 const CSS = {
     frame: "frame",

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -1,26 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const guid = require('./guid-9272df1b.js');
-const observers = require('./observers-20febba7.js');
-const dom = require('./dom-afcc4f08.js');
-const form = require('./form-a4b759d2.js');
-const interactive = require('./interactive-04057cf9.js');
-const key = require('./key-f65f1f51.js');
-const label = require('./label-bc01a1b7.js');
-const loadable = require('./loadable-488230d3.js');
-const locale = require('./locale-f3c5ce8e.js');
-const math = require('./math-40c525c1.js');
-require('./resources-aeedfe4f.js');
-require('./browser-843700f4.js');
-require('./component-f4c2ecd4.js');
+const index = require('./index-c3a85d17.js');
+const guid = require('./guid-2999da4b.js');
+const observers = require('./observers-63095bd4.js');
+const dom = require('./dom-526ae93a.js');
+const form = require('./form-ef534f10.js');
+const interactive = require('./interactive-77fbebed.js');
+const key = require('./key-c7167eca.js');
+const label = require('./label-cadbadfd.js');
+const loadable = require('./loadable-3315b101.js');
+const locale = require('./locale-cb432455.js');
+const math = require('./math-e3591dc1.js');
+require('./resources-2f0b38c2.js');
+require('./browser-767f345c.js');
+require('./component-8b8d846d.js');
 
 /**
  * Calculate slope of the tangents
@@ -236,7 +236,7 @@ const CSS = {
 };
 const maxTickElementThreshold = 250;
 
-const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::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}";
+const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::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}";
 
 function isRange(value) {
     return Array.isArray(value);
@@ -518,7 +518,7 @@ const Slider = class {
             }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
             // 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: (el) => (this.minHandle = el) }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
-        return (index.h(index.Host, { id: id, onTouchStart: this.handleTouchStart }, index.h("div", { "aria-label": label.getLabelText(this), class: {
+        return (index.h(index.Host, { id: id, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { "aria-label": label.getLabelText(this), class: {
                 ["container"]: true,
                 ["container--range"]: valueIsRange,
                 [`scale--${this.scale}`]: true,
@@ -551,7 +551,7 @@ const Slider = class {
             minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram &&
             this.precise &&
             this.labelHandles &&
-            histogramLabeledPreciseHandle, index.h(form.HiddenFormInputSlot, { component: this })))));
+            histogramLabeledPreciseHandle, index.h(form.HiddenFormInputSlot, { component: this }))))));
     }
     renderGraph() {
         return this.histogram ? (index.h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;