@esri/calcite-components 2.4.1-next.0 → 2.4.1-next.1

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n */\n\n:host([scale=\"s\"]) {\n  --calcite-checkbox-size: theme(\"spacing.3\");\n}\n:host([scale=\"m\"]) {\n  --calcite-checkbox-size: theme(\"fontSize.n1\");\n}\n:host([scale=\"l\"]) {\n  --calcite-checkbox-size: theme(\"spacing.4\");\n}\n\n:host {\n  @apply relative\n    inline-flex\n    cursor-pointer\n    select-none;\n  -webkit-tap-highlight-color: transparent;\n\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size);\n    block-size: var(--calcite-checkbox-size);\n  }\n\n  .check-svg {\n    @apply bg-foreground-1\n      pointer-events-none\n      box-border\n      block\n      overflow-hidden\n      fill-current\n      stroke-current\n      stroke-1\n      transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);\n    color: theme(\"backgroundColor.background\");\n  }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n  .check-svg {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n  }\n  .toggle:focus {\n    @apply focus-outset-danger;\n  }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n  .check-svg {\n    @apply bg-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n  .check-svg {\n    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n  }\n}\n\n.toggle {\n  @apply focus-base relative;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    @apply focus-outset;\n  }\n\n  &::after {\n    content: \"\";\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    min-block-size: theme(\"width.6\");\n    min-inline-size: theme(\"width.6\");\n    position: absolute;\n    transform: translateX(-50%) translateY(-50%);\n  }\n}\n\n@include disabled();\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"toggle\"\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\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={(toggleEl) => (this.toggleEl = toggleEl)}\n          >\n            <svg aria-hidden=\"true\" class=\"check-svg\" viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n */\n\n:host([scale=\"s\"]) {\n  --calcite-checkbox-size: theme(\"spacing.3\");\n}\n:host([scale=\"m\"]) {\n  --calcite-checkbox-size: theme(\"fontSize.n1\");\n}\n:host([scale=\"l\"]) {\n  --calcite-checkbox-size: theme(\"spacing.4\");\n}\n\n:host {\n  @apply relative\n    inline-flex\n    cursor-pointer\n    select-none;\n  -webkit-tap-highlight-color: transparent;\n\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size);\n    block-size: var(--calcite-checkbox-size);\n  }\n\n  .check-svg {\n    @apply bg-foreground-1\n      pointer-events-none\n      box-border\n      block\n      overflow-hidden\n      fill-current\n      stroke-current\n      stroke-1\n      transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);\n    color: theme(\"backgroundColor.background\");\n  }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n  .check-svg {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n  }\n  .toggle:focus {\n    @apply focus-outset-danger;\n  }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n  .check-svg {\n    @apply bg-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n  .check-svg {\n    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n  }\n}\n\n.toggle {\n  @apply focus-base relative;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    @apply focus-outset;\n  }\n\n  &::after {\n    content: \"\";\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    min-block-size: theme(\"width.6\");\n    min-inline-size: theme(\"width.6\");\n    position: absolute;\n    transform: translateX(-50%) translateY(-50%);\n  }\n}\n\n@include disabled();\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"toggle\"\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\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={(toggleEl) => (this.toggleEl = toggleEl)}\n          >\n            <svg aria-hidden=\"true\" class=\"check-svg\" viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
@@ -41,7 +41,7 @@ const ICONS = {
     checked: "check-circle-f",
 };
 
-const chipCss = ":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([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]) .container.is-circle{block-size:2rem;inline-size:2rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem}:host([scale=l]) .container.is-circle{block-size:2.75rem;inline-size:2.75rem}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container:not(.is-circle){padding-inline:var(--calcite-chip-spacing-s-internal)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{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          )}:host([scale=s]) .container.image--slotted{padding-inline-start:calc(0.125rem / 2)}:host([scale=s]) .container.is-circle{padding-inline:0}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container.closable{padding-inline-end:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted{padding-inline-start:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);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          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}.container:not(.is-circle).image--slotted .select-icon.select-icon--active{margin-inline-end:var(--calcite-chip-spacing-s-internal)}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const chipCss = ":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([scale=s]){block-size:1.5rem;font-size:var(--calcite-font-size--2);--calcite-chip-spacing-s-internal:0.25rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=s]) .close,:host([scale=s]) .select-icon--active{block-size:1rem;inline-size:1rem}:host([scale=s]) .image-container{block-size:1.25rem;inline-size:1.25rem}:host([scale=s]) .container.is-circle{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]){block-size:2rem;font-size:var(--calcite-font-size--1);--calcite-chip-spacing-s-internal:0.375rem;--calcite-chip-spacing-l-internal:0.5rem}:host([scale=m]) .close,:host([scale=m]) .image-container,:host([scale=m]) .select-icon--active{block-size:1.5rem;inline-size:1.5rem}:host([scale=m]) .container.is-circle{block-size:2rem;inline-size:2rem}:host([scale=l]){block-size:2.75rem;font-size:var(--calcite-font-size-0);--calcite-chip-spacing-s-internal:0.5rem;--calcite-chip-spacing-l-internal:0.75rem}:host([scale=l]) .image-container,:host([scale=l]) .close,:host([scale=l]) .select-icon--active{block-size:2rem;inline-size:2rem}:host([scale=l]) .container.is-circle{block-size:2.75rem;inline-size:2.75rem}:host{display:inline-flex;cursor:default;border-radius:9999px}.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);font-weight:var(--calcite-font-weight-medium);outline-color:transparent}.container:not(.is-circle){padding-inline:var(--calcite-chip-spacing-s-internal)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}:host([scale=s]) .container.image--slotted{padding-inline-start:calc(0.125rem / 2)}:host([scale=s]) .container.is-circle{padding-inline:0}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:var(--calcite-chip-spacing-s-internal)}.container:not(.text--slotted) .title{display:none}.container:not(.image--slotted) .image-container{display:none}.container.closable{padding-inline-end:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted{padding-inline-start:calc(var(--calcite-chip-spacing-l-internal) / 2)}.container:not(.is-circle).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).image--slotted .image-container~.chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle).selectable:not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.selectable):not(.text--slotted) .chip-icon{margin-inline-start:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text--slotted) .chip-icon{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.text-slotted).image--slotted .image-container{margin-inline-end:var(--calcite-chip-spacing-s-internal)}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container{margin-inline-end:0}.container:not(.is-circle):not(.closable):not(.text--slotted).image--slotted.selectable .image-container~.chip-icon{margin-inline-start:calc(var(--calcite-chip-spacing-s-internal) * 2)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline:var(--calcite-chip-spacing-s-internal)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none}.close{margin:0px;cursor:pointer;align-items:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;border-radius:50%;align-content:center;justify-content:center;--calcite-chip-transparent-hover:var(--calcite-color-transparent-hover);--calcite-chip-transparent-press:var(--calcite-color-transparent-press)}.close:hover{background-color:var(--calcite-chip-transparent-hover)}.close:focus{background-color:var(--calcite-chip-transparent-hover);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}.close:active{background-color:var(--calcite-chip-transparent-press)}.close calcite-icon{color:inherit}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:relative;visibility:hidden;inline-size:0;opacity:0;transition:opacity 0.15s ease-in-out, inline-size 0.15s ease-in-out}.select-icon.select-icon--active{visibility:visible;opacity:0.5}.container:not(.is-circle).image--slotted .select-icon.select-icon--active{margin-inline-end:var(--calcite-chip-spacing-s-internal)}:host([selected]) .select-icon{opacity:1}.container:hover .select-icon--active{opacity:1}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([kind=neutral]){background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host([kind=neutral]) .container{border-color:transparent}:host([kind=neutral]) .close{color:var(--calcite-color-text-3)}:host([kind=neutral]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([kind=inverse]){background-color:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .container{border-color:transparent}:host([kind=inverse]) .close{color:var(--calcite-color-text-inverse)}:host([kind=inverse]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([kind=brand]){background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) .container{border-color:transparent}:host([kind=brand]) .close{color:var(--calcite-color-text-inverse)}:host([kind=brand]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-inverse))}:host([appearance=outline-fill]),:host([appearance=outline]){background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1)}:host([appearance=outline-fill]) .close,:host([appearance=outline]) .close{color:var(--calcite-color-text-3)}:host([appearance=outline-fill]) .chip-icon,:host([appearance=outline]) .chip-icon{color:var(--calcite-ui-icon-color, var(--calcite-color-text-3))}:host([appearance=outline-fill]){background-color:var(--calcite-color-foreground-1)}:host([appearance=outline]){background-color:transparent}:host([kind=neutral][appearance=outline-fill]) .container,:host([kind=neutral][appearance=outline]) .container{border-color:var(--calcite-color-border-1)}:host([kind=inverse][appearance=outline-fill]) .container,:host([kind=inverse][appearance=outline]) .container{border-color:var(--calcite-color-border-inverse)}:host([kind=brand][appearance=outline-fill]) .container,:host([kind=brand][appearance=outline]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand][appearance=solid]) button,:host([kind=inverse][appearance=solid]) button{outline-color:var(--calcite-color-text-inverse)}:host([closed]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     constructor() {

package/dist/components/chip.js.map

@@ -1 +1 @@
-{"file":"chip.js","mappings":"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","names":[],"sources":["src/components/chip/resources.ts","src/components/chip/chip.scss?tag=calcite-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["export const CSS = {\n  title: \"title\",\n  close: \"close\",\n  imageContainer: \"image-container\",\n  chipIcon: \"chip-icon\",\n  textSlotted: \"text--slotted\",\n  container: \"container\",\n  imageSlotted: \"image--slotted\",\n  closable: \"closable\",\n  multiple: \"multiple\",\n  selectable: \"selectable\",\n  selectIcon: \"select-icon\",\n  selectIconActive: \"select-icon--active\",\n  nonInteractive: \"non-interactive\",\n  isCircle: \"is-circle\",\n};\n\nexport const SLOTS = {\n  image: \"image\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n  unchecked: \"circle\",\n  checkedSingle: \"circle-f\",\n  checked: \"check-circle-f\",\n};\n",":host([scale=\"s\"]) {\n  @apply text-n2 h-6;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n  .close,\n  .select-icon--active {\n    @apply h-4 w-4;\n  }\n\n  .image-container {\n    @apply h-5 w-5;\n  }\n\n  .container.is-circle {\n    @apply w-6 h-6;\n  }\n}\n\n:host([scale=\"m\"]) {\n  @apply text-n1 h-8;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1.5]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n\n  .close,\n  .image-container,\n  .select-icon--active {\n    @apply h-6 w-6;\n  }\n\n  .container.is-circle {\n    @apply w-8 h-8;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0 h-11;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[2]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[3]\");\n  .image-container,\n  .close,\n  .select-icon--active {\n    @apply h-8 w-8;\n  }\n\n  .container.is-circle {\n    @apply w-11 h-11;\n  }\n}\n\n:host {\n  @apply inline-flex\n    cursor-default\n    rounded-full;\n}\n\n.container {\n  @apply inline-flex\n  h-full\n  max-w-full\n  items-center\n  rounded-full\n  focus-base\n  justify-center\n  border\n  border-solid\n  border-color-1\n  box-border\n  font-medium;\n  &:not(.is-circle) {\n    padding-inline: var(--calcite-chip-spacing-s-internal);\n  }\n  &.selectable {\n    @apply cursor-pointer;\n  }\n  &:not(.non-interactive):focus {\n    @apply focus-outset;\n  }\n}\n\n:host([scale=\"s\"]) .container.image--slotted {\n  padding-inline-start: calc(theme(\"spacing[0.5]\") / 2);\n}\n\n:host([scale=\"s\"]) .container.is-circle {\n  padding-inline: 0;\n}\n\n.container.text--slotted .title {\n  @apply truncate;\n  padding-inline: var(--calcite-chip-spacing-s-internal);\n}\n\n.container:not(.text--slotted) .title {\n  display: none;\n}\n\n.container:not(.image--slotted) .image-container {\n  display: none;\n}\n\n.container.closable {\n  padding-inline-end: calc(var(--calcite-chip-spacing-l-internal) / 2);\n}\n\n.container:not(.is-circle) {\n  &.image--slotted {\n    padding-inline-start: calc(var(--calcite-chip-spacing-l-internal) / 2);\n  }\n\n  &.image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.image--slotted .image-container ~ .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.selectable:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.selectable):not(.text--slotted) .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text-slotted).image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {\n    margin-inline-end: 0;\n    ~ .chip-icon {\n      margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2);\n    }\n  }\n}\n\n.chip-icon {\n  @apply relative my-0 inline-flex duration-150 ease-in-out;\n  margin-inline: var(--calcite-chip-spacing-s-internal);\n}\n\n.image-container {\n  @apply inline-flex overflow-hidden;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.close {\n  @apply focus-base\n    transition-default\n    text-color-1\n    m-0\n    cursor-pointer\n    items-center\n    border-none\n    bg-transparent;\n  -webkit-appearance: none;\n  display: flex;\n  border-radius: 50%;\n  align-content: center;\n  justify-content: center;\n  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);\n  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);\n  &:hover {\n    background-color: var(--calcite-chip-transparent-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-chip-transparent-hover);\n    @apply focus-inset;\n  }\n  &:active {\n    background-color: var(--calcite-chip-transparent-press);\n  }\n  & calcite-icon {\n    color: inherit;\n  }\n}\n\n.select-icon {\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  inset-block-start: -1px;\n  position: relative;\n  visibility: hidden;\n  inline-size: 0;\n  opacity: 0;\n  transition:\n    opacity 0.15s ease-in-out,\n    inline-size 0.15s ease-in-out;\n  &.select-icon--active {\n    visibility: visible;\n    opacity: 0.5;\n  }\n}\n.container:not(.is-circle).image--slotted .select-icon.select-icon--active {\n  margin-inline-end: var(--calcite-chip-spacing-s-internal);\n}\n\n:host([selected]) .select-icon {\n  opacity: 1;\n}\n\n.container:hover .select-icon--active {\n  opacity: 1;\n}\n\nslot[name=\"image\"]::slotted(*) {\n  @apply rounded-half flex h-full w-full overflow-hidden;\n}\n\n:host([kind=\"neutral\"]) {\n  background-color: var(--calcite-color-foreground-2);\n  color: var(--calcite-color-text-1);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    color: var(--calcite-color-text-3);\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));\n  }\n}\n\n:host([kind=\"inverse\"]) {\n  background-color: var(--calcite-color-inverse);\n  @apply text-color-inverse;\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));\n  }\n}\n\n:host([kind=\"brand\"]) {\n  background-color: var(--calcite-color-brand);\n  color: var(--calcite-color-text-inverse);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));\n  }\n}\n\n:host([appearance=\"outline-fill\"]),\n:host([appearance=\"outline\"]) {\n  @apply text-color-1 bg-foreground-1;\n  .close {\n    @apply text-color-3;\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));\n  }\n}\n\n:host([appearance=\"outline-fill\"]) {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"outline\"]) {\n  @apply bg-transparent;\n}\n\n:host([kind=\"neutral\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"neutral\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-1);\n}\n\n:host([kind=\"inverse\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"inverse\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-inverse);\n}\n\n:host([kind=\"brand\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"brand\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-brand);\n}\n\n:host([kind=\"brand\"][appearance=\"solid\"]),\n:host([kind=\"inverse\"][appearance=\"solid\"]) {\n  button {\n    outline-color: var(--calcite-color-text-inverse);\n  }\n}\n\n:host([closed]) {\n  display: none;\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean, slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { CSS, SLOTS, ICONS } from \"./resources\";\nimport { Appearance, Kind, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { ChipMessages } from \"./assets/chip/t9n\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding text.\n * @slot image - A slot for adding an image.\n */\n@Component({\n  tag: \"calcite-chip\",\n  styleUrl: \"chip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Chip\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> =\n    \"solid\";\n\n  /** Specifies the kind of the component, which will apply to border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"inverse\" | \"neutral\", Kind> = \"neutral\";\n\n  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /** When `true`, hides the component. */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * This internal property, managed by a containing `calcite-chip-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = 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<ChipMessages>;\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: ChipMessages;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.\n   * This is set to `true` by a parent Chip Group component.\n   *\n   * @internal\n   */\n  @Prop() interactive = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteChipElement;\n\n  @State() defaultMessages: ChipMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() private hasText = false;\n\n  @State() private hasImage = false;\n\n  private containerEl: HTMLDivElement;\n\n  private closeButtonEl: HTMLButtonElement;\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateHasText());\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component's close button is selected.\n   */\n  @Event({ cancelable: false }) calciteChipClose: EventEmitter<void>;\n\n  /**\n   * Fires when the selected state of the component changes.\n   */\n  @Event({ cancelable: false }) calciteChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      await setUpMessages(this);\n      this.updateHasText();\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.handleEmittingEvent();\n          event.preventDefault();\n          break;\n        case \"ArrowRight\":\n        case \"ArrowLeft\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalChipKeyEvent.emit(event);\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\")\n  clickHandler(): void {\n    if (!this.interactive && this.closable) {\n      this.closeButtonEl.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (!this.disabled && this.interactive) {\n      this.containerEl?.focus();\n    } else if (!this.disabled && this.closable) {\n      this.closeButtonEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private close = (): void => {\n    this.calciteChipClose.emit();\n    this.selected = false;\n    this.closed = true;\n  };\n\n  private closeButtonKeyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private updateHasText() {\n    this.hasText = this.el.textContent.trim().length > 0;\n  }\n\n  private handleSlotImageChange = (event: Event): void => {\n    this.hasImage = slotChangeHasAssignedElement(event);\n  };\n\n  private handleEmittingEvent = (): void => {\n    if (this.interactive) {\n      this.calciteChipSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChipImage(): VNode {\n    return (\n      <div class={CSS.imageContainer}>\n        <slot name={SLOTS.image} onSlotchange={this.handleSlotImageChange} />\n      </div>\n    );\n  }\n\n  renderSelectionIcon(): VNode {\n    const icon =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.checked\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unchecked\n          : this.selected\n            ? ICONS.checkedSingle\n            : undefined;\n\n    return (\n      <div\n        class={{\n          [CSS.selectIcon]: true,\n          [CSS.selectIconActive]: this.selectionMode === \"multiple\" || this.selected,\n        }}\n      >\n        {icon ? <calcite-icon icon={icon} scale={getIconScale(this.scale)} /> : null}\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.dismissLabel}\n        class={CSS.close}\n        onClick={this.close}\n        onKeyDown={this.closeButtonKeyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\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) => (this.closeButtonEl = el)}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderIcon(): VNode {\n    return (\n      <calcite-icon\n        class={CSS.chipIcon}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon}\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const disableInteraction = disabled || (!disabled && !this.interactive);\n    const role =\n      this.selectionMode === \"multiple\" && this.interactive\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\" && this.interactive\n          ? \"radio\"\n          : this.interactive\n            ? \"button\"\n            : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div\n            aria-checked={\n              this.selectionMode !== \"none\" && this.interactive\n                ? toAriaBoolean(this.selected)\n                : undefined\n            }\n            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n            aria-label={this.label}\n            class={{\n              [CSS.container]: true,\n              [CSS.textSlotted]: this.hasText,\n              [CSS.imageSlotted]: this.hasImage,\n              [CSS.selectable]: this.selectionMode !== \"none\",\n              [CSS.multiple]: this.selectionMode === \"multiple\",\n              [CSS.closable]: this.closable,\n              [CSS.nonInteractive]: !this.interactive,\n              [CSS.isCircle]:\n                !this.closable &&\n                !this.hasText &&\n                (!this.icon || !this.hasImage) &&\n                (this.selectionMode === \"none\" ||\n                  (!!this.selectionMode && this.selectionMode !== \"multiple\" && !this.selected)),\n            }}\n            onClick={this.handleEmittingEvent}\n            role={role}\n            tabIndex={disableInteraction ? -1 : 0}\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) => (this.containerEl = el)}\n          >\n            {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n            {this.renderChipImage()}\n            {this.icon && this.renderIcon()}\n            <span class={CSS.title}>\n              <slot />\n            </span>\n            {this.closable && this.renderCloseButton()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"chip.js","mappings":"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","names":[],"sources":["src/components/chip/resources.ts","src/components/chip/chip.scss?tag=calcite-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["export const CSS = {\n  title: \"title\",\n  close: \"close\",\n  imageContainer: \"image-container\",\n  chipIcon: \"chip-icon\",\n  textSlotted: \"text--slotted\",\n  container: \"container\",\n  imageSlotted: \"image--slotted\",\n  closable: \"closable\",\n  multiple: \"multiple\",\n  selectable: \"selectable\",\n  selectIcon: \"select-icon\",\n  selectIconActive: \"select-icon--active\",\n  nonInteractive: \"non-interactive\",\n  isCircle: \"is-circle\",\n};\n\nexport const SLOTS = {\n  image: \"image\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n  unchecked: \"circle\",\n  checkedSingle: \"circle-f\",\n  checked: \"check-circle-f\",\n};\n",":host([scale=\"s\"]) {\n  @apply text-n2 h-6;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n  .close,\n  .select-icon--active {\n    @apply h-4 w-4;\n  }\n\n  .image-container {\n    @apply h-5 w-5;\n  }\n\n  .container.is-circle {\n    @apply w-6 h-6;\n  }\n}\n\n:host([scale=\"m\"]) {\n  @apply text-n1 h-8;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1.5]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n\n  .close,\n  .image-container,\n  .select-icon--active {\n    @apply h-6 w-6;\n  }\n\n  .container.is-circle {\n    @apply w-8 h-8;\n  }\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0 h-11;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[2]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[3]\");\n  .image-container,\n  .close,\n  .select-icon--active {\n    @apply h-8 w-8;\n  }\n\n  .container.is-circle {\n    @apply w-11 h-11;\n  }\n}\n\n:host {\n  @apply inline-flex\n    cursor-default\n    rounded-full;\n}\n\n.container {\n  @apply inline-flex\n  h-full\n  max-w-full\n  items-center\n  rounded-full\n  focus-base\n  justify-center\n  border\n  border-solid\n  border-color-1\n  box-border\n  font-medium;\n  &:not(.is-circle) {\n    padding-inline: var(--calcite-chip-spacing-s-internal);\n  }\n  &.selectable {\n    @apply cursor-pointer;\n  }\n  &:not(.non-interactive):focus {\n    @apply focus-outset;\n  }\n}\n\n:host([scale=\"s\"]) .container.image--slotted {\n  padding-inline-start: calc(theme(\"spacing[0.5]\") / 2);\n}\n\n:host([scale=\"s\"]) .container.is-circle {\n  padding-inline: 0;\n}\n\n.container.text--slotted .title {\n  @apply truncate;\n  padding-inline: var(--calcite-chip-spacing-s-internal);\n}\n\n.container:not(.text--slotted) .title {\n  display: none;\n}\n\n.container:not(.image--slotted) .image-container {\n  display: none;\n}\n\n.container.closable {\n  padding-inline-end: calc(var(--calcite-chip-spacing-l-internal) / 2);\n}\n\n.container:not(.is-circle) {\n  &.image--slotted {\n    padding-inline-start: calc(var(--calcite-chip-spacing-l-internal) / 2);\n  }\n\n  &.image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.image--slotted .image-container ~ .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.selectable:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.selectable):not(.text--slotted) .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text-slotted).image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {\n    margin-inline-end: 0;\n    ~ .chip-icon {\n      margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2);\n    }\n  }\n}\n\n.chip-icon {\n  @apply relative my-0 inline-flex duration-150 ease-in-out;\n  margin-inline: var(--calcite-chip-spacing-s-internal);\n}\n\n.image-container {\n  @apply inline-flex overflow-hidden;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.close {\n  @apply focus-base\n    transition-default\n    text-color-1\n    m-0\n    cursor-pointer\n    items-center\n    border-none\n    bg-transparent;\n  -webkit-appearance: none;\n  display: flex;\n  border-radius: 50%;\n  align-content: center;\n  justify-content: center;\n  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);\n  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);\n  &:hover {\n    background-color: var(--calcite-chip-transparent-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-chip-transparent-hover);\n    @apply focus-inset;\n  }\n  &:active {\n    background-color: var(--calcite-chip-transparent-press);\n  }\n  & calcite-icon {\n    color: inherit;\n  }\n}\n\n.select-icon {\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  inset-block-start: -1px;\n  position: relative;\n  visibility: hidden;\n  inline-size: 0;\n  opacity: 0;\n  transition:\n    opacity 0.15s ease-in-out,\n    inline-size 0.15s ease-in-out;\n  &.select-icon--active {\n    visibility: visible;\n    opacity: 0.5;\n  }\n}\n.container:not(.is-circle).image--slotted .select-icon.select-icon--active {\n  margin-inline-end: var(--calcite-chip-spacing-s-internal);\n}\n\n:host([selected]) .select-icon {\n  opacity: 1;\n}\n\n.container:hover .select-icon--active {\n  opacity: 1;\n}\n\nslot[name=\"image\"]::slotted(*) {\n  @apply rounded-half flex h-full w-full overflow-hidden;\n}\n\n:host([kind=\"neutral\"]) {\n  background-color: var(--calcite-color-foreground-2);\n  color: var(--calcite-color-text-1);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    color: var(--calcite-color-text-3);\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));\n  }\n}\n\n:host([kind=\"inverse\"]) {\n  background-color: var(--calcite-color-inverse);\n  @apply text-color-inverse;\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));\n  }\n}\n\n:host([kind=\"brand\"]) {\n  background-color: var(--calcite-color-brand);\n  color: var(--calcite-color-text-inverse);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));\n  }\n}\n\n:host([appearance=\"outline-fill\"]),\n:host([appearance=\"outline\"]) {\n  @apply text-color-1 bg-foreground-1;\n  .close {\n    @apply text-color-3;\n  }\n  .chip-icon {\n    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));\n  }\n}\n\n:host([appearance=\"outline-fill\"]) {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"outline\"]) {\n  @apply bg-transparent;\n}\n\n:host([kind=\"neutral\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"neutral\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-1);\n}\n\n:host([kind=\"inverse\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"inverse\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-inverse);\n}\n\n:host([kind=\"brand\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"brand\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-brand);\n}\n\n:host([kind=\"brand\"][appearance=\"solid\"]),\n:host([kind=\"inverse\"][appearance=\"solid\"]) {\n  button {\n    outline-color: var(--calcite-color-text-inverse);\n  }\n}\n\n:host([closed]) {\n  display: none;\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean, slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { CSS, SLOTS, ICONS } from \"./resources\";\nimport { Appearance, Kind, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { ChipMessages } from \"./assets/chip/t9n\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding text.\n * @slot image - A slot for adding an image.\n */\n@Component({\n  tag: \"calcite-chip\",\n  styleUrl: \"chip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Chip\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> =\n    \"solid\";\n\n  /** Specifies the kind of the component, which will apply to border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"inverse\" | \"neutral\", Kind> = \"neutral\";\n\n  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /** When `true`, hides the component. */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * This internal property, managed by a containing `calcite-chip-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = 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<ChipMessages>;\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: ChipMessages;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.\n   * This is set to `true` by a parent Chip Group component.\n   *\n   * @internal\n   */\n  @Prop() interactive = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteChipElement;\n\n  @State() defaultMessages: ChipMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() private hasText = false;\n\n  @State() private hasImage = false;\n\n  private containerEl: HTMLDivElement;\n\n  private closeButtonEl: HTMLButtonElement;\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateHasText());\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component's close button is selected.\n   */\n  @Event({ cancelable: false }) calciteChipClose: EventEmitter<void>;\n\n  /**\n   * Fires when the selected state of the component changes.\n   */\n  @Event({ cancelable: false }) calciteChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      await setUpMessages(this);\n      this.updateHasText();\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.handleEmittingEvent();\n          event.preventDefault();\n          break;\n        case \"ArrowRight\":\n        case \"ArrowLeft\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalChipKeyEvent.emit(event);\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\")\n  clickHandler(): void {\n    if (!this.interactive && this.closable) {\n      this.closeButtonEl.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (!this.disabled && this.interactive) {\n      this.containerEl?.focus();\n    } else if (!this.disabled && this.closable) {\n      this.closeButtonEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private close = (): void => {\n    this.calciteChipClose.emit();\n    this.selected = false;\n    this.closed = true;\n  };\n\n  private closeButtonKeyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private updateHasText() {\n    this.hasText = this.el.textContent.trim().length > 0;\n  }\n\n  private handleSlotImageChange = (event: Event): void => {\n    this.hasImage = slotChangeHasAssignedElement(event);\n  };\n\n  private handleEmittingEvent = (): void => {\n    if (this.interactive) {\n      this.calciteChipSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChipImage(): VNode {\n    return (\n      <div class={CSS.imageContainer}>\n        <slot name={SLOTS.image} onSlotchange={this.handleSlotImageChange} />\n      </div>\n    );\n  }\n\n  renderSelectionIcon(): VNode {\n    const icon =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.checked\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unchecked\n          : this.selected\n            ? ICONS.checkedSingle\n            : undefined;\n\n    return (\n      <div\n        class={{\n          [CSS.selectIcon]: true,\n          [CSS.selectIconActive]: this.selectionMode === \"multiple\" || this.selected,\n        }}\n      >\n        {icon ? <calcite-icon icon={icon} scale={getIconScale(this.scale)} /> : null}\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.dismissLabel}\n        class={CSS.close}\n        onClick={this.close}\n        onKeyDown={this.closeButtonKeyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\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) => (this.closeButtonEl = el)}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderIcon(): VNode {\n    return (\n      <calcite-icon\n        class={CSS.chipIcon}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon}\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const disableInteraction = disabled || (!disabled && !this.interactive);\n    const role =\n      this.selectionMode === \"multiple\" && this.interactive\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\" && this.interactive\n          ? \"radio\"\n          : this.interactive\n            ? \"button\"\n            : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div\n            aria-checked={\n              this.selectionMode !== \"none\" && this.interactive\n                ? toAriaBoolean(this.selected)\n                : undefined\n            }\n            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n            aria-label={this.label}\n            class={{\n              [CSS.container]: true,\n              [CSS.textSlotted]: this.hasText,\n              [CSS.imageSlotted]: this.hasImage,\n              [CSS.selectable]: this.selectionMode !== \"none\",\n              [CSS.multiple]: this.selectionMode === \"multiple\",\n              [CSS.closable]: this.closable,\n              [CSS.nonInteractive]: !this.interactive,\n              [CSS.isCircle]:\n                !this.closable &&\n                !this.hasText &&\n                (!this.icon || !this.hasImage) &&\n                (this.selectionMode === \"none\" ||\n                  (!!this.selectionMode && this.selectionMode !== \"multiple\" && !this.selected)),\n            }}\n            onClick={this.handleEmittingEvent}\n            role={role}\n            tabIndex={disableInteraction ? -1 : 0}\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) => (this.containerEl = el)}\n          >\n            {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n            {this.renderChipImage()}\n            {this.icon && this.renderIcon()}\n            <span class={CSS.title}>\n              <slot />\n            </span>\n            {this.closable && this.renderCloseButton()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/color-picker-hex-input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, k as hexChar, c as alphaToOpacity } from './utils.js';

package/dist/components/color-picker-swatch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as color } from './index2.js';

package/dist/components/combobox-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -26,7 +26,7 @@ const CSS = {
     textContainer: "text-container",
 };
 
-const comboboxItemCss = "@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}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--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)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{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          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--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)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot:before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}";
+const comboboxItemCss = "@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}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--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)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--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)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot:before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}";
 
 const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends HTMLElement {
     constructor() {

package/dist/components/combobox-item.js.map

@@ -1 +1 @@
-{"file":"combobox-item.js","mappings":";;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,cAAc;IAC1B,UAAU,EAAE,cAAc;IAC1B,MAAM,EAAE,cAAc;IACtB,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,eAAe;IACvB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,eAAe;IACvB,QAAQ,EAAE,iBAAiB;IAC3B,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,gBAAgB;CAChC;;ACZD,MAAM,eAAe,GAAG,+iHAA+iH;;MCuC1jH,YAAY;;;;;;QAgIf,qBAAgB,GAAG;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;wBA1HkC,KAAK;wBAKU,KAAK;sBAGtB,KAAK;;oBAMP,IAAI,EAAE;;2BAMC,KAAK;;;;6BAkCxC,UAAU;qBAOS,GAAG;;IAtC1B,oBAAoB;QAClB,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;KACvC;;;;;;IAoDD,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACtC,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,kCAAkC,CAAC,IAAI,CAAC,CAAC;QACzC,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAoBD,cAAc;QACZ,MAAM,qBAAqB,GAAG,IAAI,CAAC,aAAa,KAAK,gBAAgB,CAAC;QAEtE,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC7D,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChC;;;;;;IAYD,UAAU,CAAC,QAAgB;QACzB,OAAO,IAAI,CAAC,IAAI,IACd,oBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBACzB,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;gBAC5C,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,EAC3B,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,IACA,IAAI,CAAC;KACV;IAED,qBAAqB,CAAC,OAAgB,EAAE,QAAgB;QACtD,OAAO,OAAO,IACZ,YACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI;gBAChB,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI;gBACf,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;aACvB,GACD,KAEF,oBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI;gBAChB,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;gBAC/B,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,QAAQ,EACd,GAAG,EAAC,WAAW,EACf,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC;KACH;IAED,cAAc;QACZ,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACvB,QACE,UAAI,GAAG,EAAC,wBAAwB,IAC9B,eAAQ,CACL,EACL;SACH;QAED,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,MAAM,OAAO,GAAG,cAAc,IAAI,CAAC,QAAQ,CAAC;QAC5C,MAAM,WAAW,GAAG,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC;QACrD,MAAM,QAAQ,GAAG,QAAQ,GAAG,EAAE,GAAG,WAAW,CAAC;QAE7C,MAAM,OAAO,GAAG;YACd,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI;YACjB,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;YAC7B,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;YACzB,CAAC,GAAG,CAAC,MAAM,GAAG,cAAc;SAC7B,CAAC;QACF,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEhC,QACE,EAAC,IAAI,mBAAa,MAAM,IACtB,EAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IACtC,WACE,KAAK,EAAE,oBAAoB,IAAI,CAAC,KAAK,EAAE,EACvC,KAAK,EAAE,EAAE,mDAAmD,EAAE,GAAG,KAAK,EAAE,EAAE,IAE1E,UAAI,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAC9D,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAC7C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAC1B,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACxC,EACJ,IAAI,CAAC,cAAc,EAAE,CAClB,CACe,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/combobox-item/resources.ts","src/components/combobox-item/combobox-item.scss?tag=calcite-combobox-item&encapsulation=shadow","src/components/combobox-item/combobox-item.tsx"],"sourcesContent":["export const CSS = {\n  icon: \"icon\",\n  iconActive: \"icon--active\",\n  iconIndent: \"icon--indent\",\n  custom: \"icon--custom\",\n  dot: \"icon--dot\",\n  single: \"label--single\",\n  label: \"label\",\n  active: \"label--active\",\n  selected: \"label--selected\",\n  title: \"title\",\n  textContainer: \"text-container\",\n};\n","@include base-component();\n\n.scale--s {\n  @apply text-n2h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.2\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--m {\n  @apply text-n1h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.3\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.3\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--l {\n  @apply text-0h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing[2.5]\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.4\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.6\");\n}\n\n.container {\n  --calcite-combobox-item-indent-value: calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );\n}\n\n:host(:focus) {\n  @apply shadow-none;\n}\n\n@include disabled();\n\n:host,\nul {\n  @apply m-0 flex flex-col p-0;\n}\n\n:host(:focus),\nul:focus {\n  @apply outline-none;\n}\n\n.label {\n  @apply text-color-3\n    focus-base\n    relative\n    box-border\n    flex\n    w-full\n    min-w-full\n    cursor-pointer\n    items-center\n    no-underline\n    duration-150\n    ease-in-out;\n  @include word-break();\n  padding-block: var(--calcite-combobox-item-spacing-unit-s);\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n:host([disabled]) .label {\n  @apply cursor-default;\n}\n\n// selected state\n.label--selected {\n  @apply text-color-1 font-medium;\n}\n\n.label--active {\n  @apply focus-inset;\n}\n\n.label:hover,\n.label:active {\n  @apply text-color-1\n    bg-foreground-2\n    no-underline\n    shadow-none;\n}\n\n.title {\n  padding-block: 0;\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n.icon {\n  @apply inline-flex\n    opacity-0\n    duration-150\n    ease-in-out;\n  color: theme(\"borderColor.color.1\");\n}\n\n.icon--indent {\n  padding-inline-start: var(--calcite-combobox-item-indent-value);\n}\n\n.icon--custom {\n  margin-block-start: -1px;\n  padding-inline-start: var(--calcite-combobox-item-spacing-unit-l);\n  @apply text-color-3;\n}\n\n.icon--active {\n  @apply text-color-1;\n}\n\n.icon--dot {\n  @apply flex justify-center;\n  min-inline-size: var(--calcite-combobox-item-selector-icon-size);\n}\n\n.icon--dot:before {\n  text-align: start;\n  content: \"\\2022\";\n}\n\n.label--active .icon {\n  @apply opacity-100;\n}\n\n.label--selected .icon {\n  @apply opacity-100;\n  color: theme(\"backgroundColor.brand\");\n}\n\n:host(:hover[disabled]) .icon {\n  @apply opacity-100;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { ComboboxChildElement } from \"../combobox/interfaces\";\nimport { getAncestors, getDepth, isSingleLike } from \"../combobox/utils\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { CSS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding nested `calcite-combobox-item`s.\n */\n@Component({\n  tag: \"calcite-combobox-item\",\n  styleUrl: \"combobox-item.scss\",\n  shadow: true,\n})\nexport class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** When `true`, the component is active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */\n  @Prop({ mutable: true }) ancestors: ComboboxChildElement[];\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true }) guid = guid();\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  @Watch(\"selected\")\n  selectedWatchHandler(): void {\n    this.calciteComboboxItemChange.emit();\n  }\n\n  /** The component's text. */\n  @Prop({ reflect: true }) textLabel!: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /**\n   * When `true`, omits the component from the `calcite-combobox` filtered search results.\n   */\n  @Prop({ reflect: true }) filterDisabled: boolean;\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"multiple\"` allows any number of selections,\n   *\n   * `\"single\"` allows only one selection,\n   *\n   * `\"single-persist\"` allows one selection and prevents de-selection, and\n   *\n   * `\"ancestors\"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"single\" | \"single-persist\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  > = \"multiple\";\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteComboboxItemElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.ancestors = getAncestors(this.el);\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires whenever the component is selected or unselected.\n   *\n   */\n  @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  toggleSelected(): Promise<void> {\n    const isSinglePersistSelect = this.selectionMode === \"single-persist\";\n\n    if (this.disabled || (isSinglePersistSelect && this.selected)) {\n      return;\n    }\n\n    this.selected = !this.selected;\n  }\n\n  private itemClickHandler = (): void => {\n    this.toggleSelected();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderIcon(iconPath: string): VNode {\n    return this.icon ? (\n      <calcite-icon\n        class={{\n          [CSS.custom]: !!this.icon,\n          [CSS.iconActive]: this.icon && this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon || iconPath}\n        key=\"icon\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n  }\n\n  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {\n    return showDot ? (\n      <span\n        class={{\n          [CSS.icon]: true,\n          [CSS.dot]: true,\n          [CSS.iconIndent]: true,\n        }}\n      />\n    ) : (\n      <calcite-icon\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconActive]: this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={iconPath}\n        key=\"indicator\"\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  renderChildren(): VNode {\n    if (getSlotted(this.el)) {\n      return (\n        <ul key=\"default-slot-container\">\n          <slot />\n        </ul>\n      );\n    }\n\n    return null;\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const isSingleSelect = isSingleLike(this.selectionMode);\n    const showDot = isSingleSelect && !disabled;\n    const defaultIcon = isSingleSelect ? \"dot\" : \"check\";\n    const iconPath = disabled ? \"\" : defaultIcon;\n\n    const classes = {\n      [CSS.label]: true,\n      [CSS.selected]: this.selected,\n      [CSS.active]: this.active,\n      [CSS.single]: isSingleSelect,\n    };\n    const depth = getDepth(this.el);\n\n    return (\n      <Host aria-hidden=\"true\">\n        <InteractiveContainer disabled={disabled}>\n          <div\n            class={`container scale--${this.scale}`}\n            style={{ \"--calcite-combobox-item-spacing-indent-multiplier\": `${depth}` }}\n          >\n            <li class={classes} id={this.guid} onClick={this.itemClickHandler}>\n              {this.renderSelectIndicator(showDot, iconPath)}\n              {this.renderIcon(iconPath)}\n              <span class=\"title\">{this.textLabel}</span>\n            </li>\n            {this.renderChildren()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"combobox-item.js","mappings":"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","names":[],"sources":["src/components/combobox-item/resources.ts","src/components/combobox-item/combobox-item.scss?tag=calcite-combobox-item&encapsulation=shadow","src/components/combobox-item/combobox-item.tsx"],"sourcesContent":["export const CSS = {\n  icon: \"icon\",\n  iconActive: \"icon--active\",\n  iconIndent: \"icon--indent\",\n  custom: \"icon--custom\",\n  dot: \"icon--dot\",\n  single: \"label--single\",\n  label: \"label\",\n  active: \"label--active\",\n  selected: \"label--selected\",\n  title: \"title\",\n  textContainer: \"text-container\",\n};\n","@include base-component();\n\n.scale--s {\n  @apply text-n2h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.2\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--m {\n  @apply text-n1h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.3\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.3\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--l {\n  @apply text-0h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing[2.5]\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.4\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.6\");\n}\n\n.container {\n  --calcite-combobox-item-indent-value: calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );\n}\n\n:host(:focus) {\n  @apply shadow-none;\n}\n\n@include disabled();\n\n:host,\nul {\n  @apply m-0 flex flex-col p-0;\n}\n\n:host(:focus),\nul:focus {\n  @apply outline-none;\n}\n\n.label {\n  @apply text-color-3\n    focus-base\n    relative\n    box-border\n    flex\n    w-full\n    min-w-full\n    cursor-pointer\n    items-center\n    no-underline\n    duration-150\n    ease-in-out;\n  @include word-break();\n  padding-block: var(--calcite-combobox-item-spacing-unit-s);\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n:host([disabled]) .label {\n  @apply cursor-default;\n}\n\n// selected state\n.label--selected {\n  @apply text-color-1 font-medium;\n}\n\n.label--active {\n  @apply focus-inset;\n}\n\n.label:hover,\n.label:active {\n  @apply text-color-1\n    bg-foreground-2\n    no-underline\n    shadow-none;\n}\n\n.title {\n  padding-block: 0;\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n.icon {\n  @apply inline-flex\n    opacity-0\n    duration-150\n    ease-in-out;\n  color: theme(\"borderColor.color.1\");\n}\n\n.icon--indent {\n  padding-inline-start: var(--calcite-combobox-item-indent-value);\n}\n\n.icon--custom {\n  margin-block-start: -1px;\n  padding-inline-start: var(--calcite-combobox-item-spacing-unit-l);\n  @apply text-color-3;\n}\n\n.icon--active {\n  @apply text-color-1;\n}\n\n.icon--dot {\n  @apply flex justify-center;\n  min-inline-size: var(--calcite-combobox-item-selector-icon-size);\n}\n\n.icon--dot:before {\n  text-align: start;\n  content: \"\\2022\";\n}\n\n.label--active .icon {\n  @apply opacity-100;\n}\n\n.label--selected .icon {\n  @apply opacity-100;\n  color: theme(\"backgroundColor.brand\");\n}\n\n:host(:hover[disabled]) .icon {\n  @apply opacity-100;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { ComboboxChildElement } from \"../combobox/interfaces\";\nimport { getAncestors, getDepth, isSingleLike } from \"../combobox/utils\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { CSS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding nested `calcite-combobox-item`s.\n */\n@Component({\n  tag: \"calcite-combobox-item\",\n  styleUrl: \"combobox-item.scss\",\n  shadow: true,\n})\nexport class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** When `true`, the component is active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */\n  @Prop({ mutable: true }) ancestors: ComboboxChildElement[];\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true }) guid = guid();\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  @Watch(\"selected\")\n  selectedWatchHandler(): void {\n    this.calciteComboboxItemChange.emit();\n  }\n\n  /** The component's text. */\n  @Prop({ reflect: true }) textLabel!: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /**\n   * When `true`, omits the component from the `calcite-combobox` filtered search results.\n   */\n  @Prop({ reflect: true }) filterDisabled: boolean;\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"multiple\"` allows any number of selections,\n   *\n   * `\"single\"` allows only one selection,\n   *\n   * `\"single-persist\"` allows one selection and prevents de-selection, and\n   *\n   * `\"ancestors\"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"single\" | \"single-persist\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  > = \"multiple\";\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteComboboxItemElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.ancestors = getAncestors(this.el);\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires whenever the component is selected or unselected.\n   *\n   */\n  @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  toggleSelected(): Promise<void> {\n    const isSinglePersistSelect = this.selectionMode === \"single-persist\";\n\n    if (this.disabled || (isSinglePersistSelect && this.selected)) {\n      return;\n    }\n\n    this.selected = !this.selected;\n  }\n\n  private itemClickHandler = (): void => {\n    this.toggleSelected();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderIcon(iconPath: string): VNode {\n    return this.icon ? (\n      <calcite-icon\n        class={{\n          [CSS.custom]: !!this.icon,\n          [CSS.iconActive]: this.icon && this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon || iconPath}\n        key=\"icon\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n  }\n\n  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {\n    return showDot ? (\n      <span\n        class={{\n          [CSS.icon]: true,\n          [CSS.dot]: true,\n          [CSS.iconIndent]: true,\n        }}\n      />\n    ) : (\n      <calcite-icon\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconActive]: this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={iconPath}\n        key=\"indicator\"\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  renderChildren(): VNode {\n    if (getSlotted(this.el)) {\n      return (\n        <ul key=\"default-slot-container\">\n          <slot />\n        </ul>\n      );\n    }\n\n    return null;\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const isSingleSelect = isSingleLike(this.selectionMode);\n    const showDot = isSingleSelect && !disabled;\n    const defaultIcon = isSingleSelect ? \"dot\" : \"check\";\n    const iconPath = disabled ? \"\" : defaultIcon;\n\n    const classes = {\n      [CSS.label]: true,\n      [CSS.selected]: this.selected,\n      [CSS.active]: this.active,\n      [CSS.single]: isSingleSelect,\n    };\n    const depth = getDepth(this.el);\n\n    return (\n      <Host aria-hidden=\"true\">\n        <InteractiveContainer disabled={disabled}>\n          <div\n            class={`container scale--${this.scale}`}\n            style={{ \"--calcite-combobox-item-spacing-indent-multiplier\": `${depth}` }}\n          >\n            <li class={classes} id={this.guid} onClick={this.itemClickHandler}>\n              {this.renderSelectIndicator(showDot, iconPath)}\n              {this.renderIcon(iconPath)}\n              <span class=\"title\">{this.textLabel}</span>\n            </li>\n            {this.renderChildren()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.1-next.0
+ * v2.4.1-next.1
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter.js';
@@ -37,11 +37,11 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
 
 /**
  * Do not edit directly
- * Generated on Wed, 07 Feb 2024 22:55:30 GMT
+ * Generated on Fri, 09 Feb 2024 22:16:40 GMT
  */
 const calciteSize48 = "48px";
 
-const comboboxCss = ":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{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          )}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-s)}:host([scale=m]) .input--icon,:host([scale=l]) .input--icon{padding-inline:0.25rem}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = ":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -1008,6 +1008,15 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                 [CSS$1.chipInvisible]: chipInvisible,
             }, scale: scale, title: label, value: "" }, label));
     }
+    get showingInlineIcon() {
+        const { placeholderIcon, selectionMode, selectedItems, open } = this;
+        const selectedItem = selectedItems[0];
+        const selectedIcon = selectedItem?.icon;
+        const singleSelectionMode = isSingleLike(selectionMode);
+        return !open && selectedItem
+            ? !!selectedIcon && singleSelectionMode
+            : !!placeholderIcon && (!selectedItem || singleSelectionMode);
+    }
     renderInput() {
         const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
         const single = isSingleLike(selectionMode);
@@ -1024,7 +1033,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                 "input--single": true,
                 "input--transparent": this.activeChipIndex > -1,
                 "input--hidden": showLabel,
-                "input--icon": !!this.placeholderIcon,
+                "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
             }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
             // 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) })));
@@ -1048,19 +1057,15 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             // 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: setContainerEl }, h("ul", { class: { list: true, "list--hide": !open } }, h("slot", null)))));
     }
-    renderIconStart() {
-        const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
+    renderSelectedOrPlaceholderIcon() {
+        const { selectedItems, placeholderIcon, placeholderIconFlipRtl } = this;
         const selectedItem = selectedItems[0];
         const selectedIcon = selectedItem?.icon;
-        const singleSelectionMode = isSingleLike(selectionMode);
-        const iconAtStart = !this.open && selectedItem
-            ? !!selectedIcon && singleSelectionMode
-            : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
-        return (iconAtStart && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: getIconScale(this.scale) }))));
+        return (this.showingInlineIcon && (h("span", { class: "icon-start", key: "selected-placeholder-icon" }, h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: getIconScale(this.scale) }))));
     }
-    renderIconEnd() {
+    renderChevronIcon() {
         const { open } = this;
-        return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        return (h("span", { class: "icon-end", key: "chevron" }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     render() {
         const { selectionDisplay, guid, label, open } = this;
@@ -1075,17 +1080,17 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                 "wrapper--active": open,
             }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
             // 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.setReferenceEl }, h("div", { class: {
+            ref: this.setReferenceEl }, this.renderSelectedOrPlaceholderIcon(), h("div", { class: {
                 "grid-input": true,
                 [CSS$1.selectionDisplayFit]: fitSelectionDisplay,
                 [CSS$1.selectionDisplaySingle]: singleSelectionDisplay,
-            }, ref: this.setChipContainerEl }, this.renderIconStart(), !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
+            }, key: "grid", ref: this.setChipContainerEl }, !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
             !allSelectionDisplay && [
             this.renderSelectedIndicatorChip(),
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderChevronIcon()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }