@esri/calcite-components 2.13.0 → 2.13.2

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  single: \"single\",\n  selectable: \"selectable\",\n  selectIcon: \"select-icon\",\n  selectIconActive: \"select-icon--active\",\n  nonInteractive: \"non-interactive\",\n  isCircle: \"is-circle\",\n  selected: \"selected\",\n};\n\nexport const SLOTS = {\n  image: \"image\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n  checkedSingle: \"circle-f\",\n  uncheckedMultiple: \"square\",\n  checkedMultiple: \"check-square-f\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-chip-background-color: Specifies the component's background color.\n * @prop --calcite-chip-border-color: Specifies the component's border color.\n * @prop --calcite-chip-corner-radius: Specifies the component's corner radius.\n * @prop --calcite-chip-text-color: Specifies the component's text color.\n * @prop --calcite-chip-icon-color: Specifies the component's icon color.\n * @prop --calcite-chip-close-icon-color: Specifies the component's close element icon color.\n * @prop --calcite-chip-select-icon-color: Specifies the component's selection element icon color.\n * @prop --calcite-chip-select-icon-color-pressed: Specifies the component's selection element icon color when active.\n *\n */\n\n:host {\n  @apply inline-flex\n    cursor-default;\n  border-radius: var(--calcite-chip-corner-radius, 9999px);\n}\n\n/* Host Prop Variant styles */\n:host([closed]) {\n  display: none;\n}\n\n:host([appearance=\"outline\"]),\n:host([appearance=\"outline-fill\"]) {\n  .container {\n    color: var(--calcite-chip-text-color, var(--calcite-color-text-1));\n  }\n\n  &:host([kind=\"brand\"]) .container {\n    border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));\n  }\n\n  &:host([kind=\"inverse\"]) .container {\n    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse));\n  }\n\n  &:host([kind=\"neutral\"]) .container {\n    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));\n  }\n\n  .close {\n    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));\n  }\n}\n:host([appearance=\"outline\"]) .container {\n  @apply bg-transparent;\n}\n:host([appearance=\"outline-fill\"]) .container {\n  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));\n}\n:host([appearance=\"solid\"]) {\n  .container {\n    border-color: transparent;\n  }\n\n  &:host([kind=\"brand\"]),\n  &:host([kind=\"inverse\"]) {\n    .container {\n      color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));\n    }\n\n    .close {\n      outline-color: var(--calcite-color-text-inverse);\n    }\n  }\n\n  &:host([kind=\"brand\"]) {\n    .container {\n      background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));\n    }\n  }\n\n  &:host([kind=\"inverse\"]) {\n    .container {\n      background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));\n    }\n  }\n\n  &:host([kind=\"neutral\"]) .container {\n    background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2));\n  }\n}\n:host([kind=\"neutral\"]) .container {\n  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));\n\n  .close {\n    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));\n  }\n}\n\n:host([selected]) .select-icon {\n  opacity: 1;\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    --calcite-internal-chip-block-size: 1.5rem /* 24px */;\n    --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;\n    --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n    --calcite-internal-chip-font-size: var(--calcite-font-size--2);\n    --calcite-internal-chip-icon-size: 1rem /* 16px */;\n    --calcite-internal-chip-icon-space: 0.25rem /* 4px */;\n    --calcite-internal-chip-image-size: 1.25rem /* 20px */;\n    --calcite-internal-chip-title-space: 0.25rem /* 4px */;\n    --calcite-internal-close-size: 1rem /* 16px */;\n\n    &:not(.closable) {\n      &.is-circle {\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);\n      }\n    }\n\n    &.image--slotted {\n      &:has(.chip-icon),\n      &.text--slotted,\n      &.closable {\n        --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;\n      }\n      &:not(.text--slotted, :has(.chip-icon)),\n      &:not(.selectable) {\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n      }\n    }\n\n    &.selectable.single:not(.is-circle) {\n      &.image--slotted {\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n      }\n      &.selected {\n        --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;\n        --calcite-internal-chip-select-space-x-start: 0;\n\n        &.image--slotted {\n          --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;\n          --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;\n        }\n      }\n    }\n\n    &.multiple:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;\n\n      &.image--slotted {\n        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;\n        --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n\n        &:not(.text--slotted) {\n          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;\n        }\n      }\n    }\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    --calcite-internal-chip-block-size: 2rem /* 32px */;\n    --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;\n    --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;\n    --calcite-internal-chip-font-size: var(--calcite-font-size--1);\n    --calcite-internal-chip-icon-size: 1.5rem /* 24px */;\n    --calcite-internal-chip-icon-space: 0.375rem /* 6px */;\n    --calcite-internal-chip-image-size: 1.5rem /* 24px */;\n    --calcite-internal-chip-title-space: 0.375rem /* 6px */;\n    --calcite-internal-close-size: 1.5rem /* 24px */;\n\n    &:not(.closable) {\n      &.is-circle {\n        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n      }\n    }\n\n    &.image--slotted {\n      &:not(.is-circle) {\n        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      }\n\n      &:has(.chip-icon),\n      &.text--slotted,\n      &.closable {\n        --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;\n      }\n    }\n\n    &.selectable.single:not(.is-circle) {\n      &.image--slotted {\n        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      }\n      &.selected {\n        --calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);\n        --calcite-internal-chip-select-space-x-start: 0;\n\n        &.image--slotted {\n          --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;\n        }\n      }\n    }\n\n    &.multiple:not(.is-circle) {\n      --calcite-internal-chip-select-space-x-end: 0.125rem /* 2px */;\n      --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;\n\n      &.image--slotted {\n        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;\n        --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;\n      }\n    }\n\n    &.closable:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;\n    }\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    --calcite-internal-chip-block-size: 2.75rem /* 44px */;\n    --calcite-internal-chip-container-space-x-end: 0.5rem /* 8px */;\n    --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;\n    --calcite-internal-chip-font-size: var(--calcite-font-size-0);\n    --calcite-internal-chip-icon-size: 2rem /* 32px */;\n    --calcite-internal-chip-icon-space: 0.5rem /* 8px */;\n    --calcite-internal-chip-image-size: 2rem /* 32px */;\n    --calcite-internal-chip-title-space: 0.5rem /* 8px */;\n    --calcite-internal-close-size: 2rem /* 32px */;\n\n    &:not(.closable) {\n      &.is-circle {\n        --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;\n        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      }\n    }\n\n    &.image--slotted {\n      &:not(.is-circle) {\n        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;\n      }\n\n      &:has(.chip-icon),\n      &.text--slotted,\n      &.closable {\n        --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;\n      }\n    }\n\n    &.selectable.single:not(.is-circle) {\n      &.image--slotted {\n        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;\n      }\n      &.selected {\n        --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n        --calcite-internal-chip-select-space-x-start: 0;\n\n        &.image--slotted {\n          --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;\n          --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;\n        }\n      }\n    }\n\n    &.multiple:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;\n\n      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;\n\n      &.image--slotted {\n        --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;\n      }\n    }\n\n    &.closable:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;\n    }\n  }\n}\n\n// Sub-element styles\n.container {\n  @apply inline-flex\n  h-full\n  max-w-full\n  items-center\n  focus-base\n  justify-center\n  box-border\n  font-medium;\n\n  border-radius: var(--calcite-chip-corner-radius, 9999px);\n  border-width: var(--calcite-border-width-sm);\n  border-style: solid;\n  font-size: var(--calcite-internal-chip-font-size, var(--calcite-font-size));\n  padding-inline-start: var(--calcite-internal-chip-container-space-x-start);\n  padding-inline-end: var(--calcite-internal-chip-container-space-x-end);\n  block-size: var(--calcite-internal-chip-block-size, auto);\n  inline-size: var(--calcite-internal-chip-inline-size, auto);\n  min-inline-size: var(--calcite-internal-chip-block-size, auto);\n\n  &:hover .select-icon--active {\n    opacity: 1;\n  }\n\n  &.selectable {\n    @apply cursor-pointer;\n  }\n  &:not(.non-interactive):focus {\n    @apply focus-outset;\n  }\n\n  &.text--slotted .title {\n    @apply truncate;\n  }\n\n  &:not(.text--slotted) .title,\n  &:not(.image--slotted) .image-container {\n    display: none;\n  }\n\n  &.is-circle {\n    .chip-icon,\n    .image-container {\n      padding: 0;\n    }\n  }\n}\n\n.title {\n  padding-inline: var(--calcite-internal-chip-title-space);\n}\n\n.image-container {\n  @apply inline-flex overflow-hidden;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  block-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);\n  inline-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);\n  padding-inline-start: 0;\n  padding-inline-end: var(--calcite-internal-chip-image-space-x-end, 0);\n}\n\n.chip-icon {\n  @apply relative my-0 inline-flex duration-150 ease-in-out;\n  color: var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));\n  padding-inline: var(--calcite-internal-chip-icon-space, 0.375rem /* 6px */);\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: absolute;\n  visibility: hidden;\n  inline-size: auto;\n  opacity: 0;\n  transition:\n    opacity 0.15s ease-in-out,\n    inline-size 0.15s ease-in-out;\n  color: var(--calcite-chip-select-icon-color, currentColor);\n\n  &.select-icon--active {\n    position: relative;\n    visibility: visible;\n    opacity: 0.5;\n    color: var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor));\n  }\n}\n\n.multiple .select-icon {\n  @apply flex justify-center items-center;\n}\n\n.multiple .select-icon,\n.single .select-icon--active {\n  padding-inline-start: var(--calcite-internal-chip-select-space-x-start);\n  padding-inline-end: var(--calcite-internal-chip-select-space-x-end);\n  block-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);\n  inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);\n}\n\n.close {\n  color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));\n}\n\nslot[name=\"image\"]::slotted(*) {\n  @apply rounded-half flex h-full w-full overflow-hidden;\n}\n\n@include close-button();\n@include disabled();\n@include base-component();\n","import {\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 { Appearance, Kind, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { getIconScale } from \"../../utils/component\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ChipMessages } from \"./assets/chip/t9n\";\nimport { CSS, SLOTS, ICONS } from \"./resources\";\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 InteractiveComponent, LoadableComponent, LocalizedComponent, 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: IconNameOrString;\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  @Watch(\"selected\")\n  watchSelected(selected: boolean): void {\n    if (this.selectionMode === \"none\") {\n      return;\n    }\n    this.handleSelectionPropertyChange(selected);\n  }\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   * @internal\n   */\n  @Prop() parentChipGroup: HTMLCalciteChipGroupElement;\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  // --------------------------------------------------------------------------\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   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalSyncSelectedChips: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    if (this.selectionMode !== \"none\" && this.interactive && this.selected) {\n      this.handleSelectionPropertyChange(this.selected);\n    }\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (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 handleDefaultSlotChange = (): void => {\n    this.updateHasText();\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  private handleSelectionPropertyChange(selected: boolean): void {\n    if (this.selectionMode === \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\n    }\n    const selectedInParent = this.parentChipGroup.selectedItems.includes(this.el);\n\n    if (!selectedInParent && selected && this.selectionMode !== \"multiple\") {\n      this.calciteInternalChipSelect.emit();\n    }\n    if (this.selectionMode !== \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\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\"\n        ? this.selected\n          ? ICONS.checkedMultiple\n          : ICONS.uncheckedMultiple\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        ref={(el) => (this.closeButtonEl = el)}\n        tabIndex={this.disabled ? -1 : 0}\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-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.single]:\n                this.selectionMode === \"single\" || this.selectionMode === \"single-persist\",\n              [CSS.selected]: this.selected,\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            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={disableInteraction ? -1 : 0}\n          >\n            {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n            {this.renderChipImage()}\n            {this.icon && this.renderIcon()}\n            <span class={CSS.title}>\n              <slot onSlotchange={this.handleDefaultSlotChange} />\n            </span>\n            {this.closable && this.renderCloseButton()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"chip.js","mappings":";;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,cAAc,EAAE,iBAAiB;IACjC,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,eAAe;IAC5B,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,gBAAgB;IAC9B,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,aAAa;IACzB,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,iBAAiB;IACjC,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,GAAG;IACV,aAAa,EAAE,UAAU;IACzB,iBAAiB,EAAE,QAAQ;IAC3B,eAAe,EAAE,gBAAgB;CACzB;;AC5BV,MAAM,OAAO,GAAG,83ZAA83Z,CAAC;AAC/4Z,0BAAe,OAAO;;MCmDT,IAAI;;;;;;;;;;;;;;;QA6OP,4BAAuB,GAAG;YAChC,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC;QAEM,UAAK,GAAG;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB,CAAC;QAEM,8BAAyB,GAAG,CAAC,KAAoB;YACvD,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;aACd;SACF,CAAC;QAMM,0BAAqB,GAAG,CAAC,KAAY;YAC3C,IAAI,CAAC,QAAQ,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SACrD,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;aAC/B;SACF,CAAC;wBAjQkC,KAAK;0BAIvC,OAAO;oBAGuE,SAAS;wBAGrD,KAAK;;2BAMF,KAAK;qBAGJ,GAAG;;;sBASM,KAAK;6BASpD,MAAM;wBAG2C,KAAK;;;2BAmClC,KAAK;;;;uBAwBA,KAAK;wBAEJ,KAAK;;IA1DjC,aAAa,CAAC,QAAiB;QAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;YACjC,OAAO;SACR;QACD,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,CAAC;KAC9C;IAiBD,gBAAgB;;KAEf;IA4BD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IA+CD,iBAAiB;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;YACtE,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACnD;KACF;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,MAAM,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,SAAS,EAAE,EAAE;YACf,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;;IAQD,cAAc,CAAC,KAAoB;QACjC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE;YAC5B,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACR,KAAK,YAAY,CAAC;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,MAAM,CAAC;gBACZ,KAAK,KAAK;oBACR,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;aACT;SACF;KACF;IAGD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;YACtC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC5B;KACF;;;;;;;IAUD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;SAC3B;aAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC1C,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;SAC7B;KACF;IAyBO,aAAa;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;KACtD;IAYO,6BAA6B,CAAC,QAAiB;QACrD,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YACnC,IAAI,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAAC;SAC9C;QACD,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE9E,IAAI,CAAC,gBAAgB,IAAI,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE;YACtE,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;SACvC;QACD,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YACnC,IAAI,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAAC;SAC9C;KACF;;;;;;IAOD,eAAe;QACb,QACE,WAAK,KAAK,EAAE,GAAG,CAAC,cAAc,IAC5B,YAAM,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAAI,CACjE,EACN;KACH;IAED,mBAAmB;QACjB,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU;cAC7B,IAAI,CAAC,QAAQ;kBACX,KAAK,CAAC,eAAe;kBACrB,KAAK,CAAC,iBAAiB;cACzB,IAAI,CAAC,QAAQ;kBACX,KAAK,CAAC,aAAa;kBACnB,SAAS,CAAC;QAElB,QACE,WACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;gBACtB,CAAC,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ;aAC3E,IAEA,IAAI,GAAG,oBAAc,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,GAAG,IAAI,CACxE,EACN;KACH;IAED,iBAAiB;QACf,QACE,4BACc,IAAI,CAAC,QAAQ,CAAC,YAAY,EACtC,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,SAAS,EAAE,IAAI,CAAC,yBAAyB,EACzC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAEhC,oBAAc,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,CAC7D,EACT;KACH;IAED,UAAU;QACR,QACE,oBACE,KAAK,EAAE,GAAG,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,EACF;KACH;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,kBAAkB,GAAG,QAAQ,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxE,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW;cACjD,UAAU;cACV,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;kBAC/C,OAAO;kBACP,IAAI,CAAC,WAAW;sBACd,QAAQ;sBACR,SAAS,CAAC;QACpB,QACE,EAAC,IAAI,uDACH,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,QAAQ,IACtC,4EAEI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;kBAC7C,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;kBAC5B,SAAS,gBAEH,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI;gBACrB,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO;gBAC/B,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;gBACjC,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,KAAK,MAAM;gBAC/C,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,UAAU;gBACjD,CAAC,GAAG,CAAC,MAAM,GACT,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,gBAAgB;gBAC5E,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;gBAC7B,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;gBAC7B,CAAC,GAAG,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,WAAW;gBACvC,CAAC,GAAG,CAAC,QAAQ,GACX,CAAC,IAAI,CAAC,QAAQ;oBACd,CAAC,IAAI,CAAC,OAAO;qBACZ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;qBAC7B,IAAI,CAAC,aAAa,KAAK,MAAM;yBAC3B,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aACnF,EACD,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,kBAAkB,GAAG,CAAC,CAAC,GAAG,CAAC,IAEpC,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAC3D,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC/B,6DAAM,KAAK,EAAE,GAAG,CAAC,KAAK,IACpB,6DAAM,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC/C,EACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACtC,CACe,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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  single: \"single\",\n  selectable: \"selectable\",\n  selectIcon: \"select-icon\",\n  selectIconActive: \"select-icon--active\",\n  nonInteractive: \"non-interactive\",\n  isCircle: \"is-circle\",\n  selected: \"selected\",\n};\n\nexport const SLOTS = {\n  image: \"image\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n  checkedSingle: \"circle-f\",\n  uncheckedMultiple: \"square\",\n  checkedMultiple: \"check-square-f\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-chip-background-color: Specifies the component's background color.\n * @prop --calcite-chip-border-color: Specifies the component's border color.\n * @prop --calcite-chip-corner-radius: Specifies the component's corner radius.\n * @prop --calcite-chip-text-color: Specifies the component's text color.\n * @prop --calcite-chip-icon-color: Specifies the component's icon color.\n * @prop --calcite-chip-close-icon-color: Specifies the component's close element icon color.\n * @prop --calcite-chip-select-icon-color: Specifies the component's selection element icon color.\n * @prop --calcite-chip-select-icon-color-pressed: Specifies the component's selection element icon color when active.\n *\n */\n\n:host {\n  @apply inline-flex\n    cursor-default;\n  border-radius: var(--calcite-chip-corner-radius, 9999px);\n}\n\n/* Host Prop Variant styles */\n:host([closed]) {\n  display: none;\n}\n\n:host([appearance=\"outline\"]),\n:host([appearance=\"outline-fill\"]) {\n  .container {\n    --calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);\n    color: var(--calcite-chip-text-color, var(--calcite-color-text-1));\n  }\n\n  &:host([kind=\"brand\"]) .container {\n    border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));\n  }\n\n  &:host([kind=\"inverse\"]) .container {\n    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse));\n  }\n\n  &:host([kind=\"neutral\"]) .container {\n    border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));\n  }\n}\n:host([appearance=\"outline\"]) .container {\n  @apply bg-transparent;\n}\n:host([appearance=\"outline-fill\"]) .container {\n  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));\n}\n:host([appearance=\"solid\"]) {\n  .container {\n    border-color: transparent;\n  }\n\n  &:host([kind=\"brand\"]),\n  &:host([kind=\"inverse\"]) {\n    .container {\n      color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));\n    }\n\n    .close {\n      outline-color: var(--calcite-color-text-inverse);\n    }\n  }\n\n  &:host([kind=\"brand\"]) {\n    .container {\n      background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));\n    }\n  }\n\n  &:host([kind=\"inverse\"]) {\n    .container {\n      background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));\n    }\n  }\n\n  &:host([kind=\"neutral\"]) .container {\n    background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2));\n  }\n}\n:host([kind=\"neutral\"]) .container {\n  --calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);\n\n  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));\n}\n\n:host([selected]) .select-icon {\n  opacity: 1;\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    --calcite-internal-chip-block-size: 1.5rem /* 24px */;\n    --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;\n    --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n    --calcite-internal-chip-font-size: var(--calcite-font-size--2);\n    --calcite-internal-chip-icon-size: 1rem /* 16px */;\n    --calcite-internal-chip-icon-space: 0.25rem /* 4px */;\n    --calcite-internal-chip-image-size: 1.25rem /* 20px */;\n    --calcite-internal-chip-title-space: 0.25rem /* 4px */;\n    --calcite-internal-close-size: 1rem /* 16px */;\n\n    &:not(.closable) {\n      &.is-circle {\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);\n      }\n    }\n\n    &.image--slotted {\n      &:has(.chip-icon),\n      &.text--slotted,\n      &.closable {\n        --calcite-internal-chip-image-space-x-end: 0.25rem /* 4px */;\n      }\n      &:not(.text--slotted, :has(.chip-icon)),\n      &:not(.selectable) {\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n      }\n    }\n\n    &.selectable.single:not(.is-circle) {\n      &.image--slotted {\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n      }\n      &.selected {\n        --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;\n        --calcite-internal-chip-select-space-x-start: 0;\n\n        &.image--slotted {\n          --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;\n          --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;\n        }\n      }\n    }\n\n    &.multiple:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;\n\n      &.image--slotted {\n        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;\n        --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n\n        &:not(.text--slotted) {\n          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;\n        }\n      }\n    }\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    --calcite-internal-chip-block-size: 2rem /* 32px */;\n    --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;\n    --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;\n    --calcite-internal-chip-font-size: var(--calcite-font-size--1);\n    --calcite-internal-chip-icon-size: 1.5rem /* 24px */;\n    --calcite-internal-chip-icon-space: 0.375rem /* 6px */;\n    --calcite-internal-chip-image-size: 1.5rem /* 24px */;\n    --calcite-internal-chip-title-space: 0.375rem /* 6px */;\n    --calcite-internal-close-size: 1.5rem /* 24px */;\n\n    &:not(.closable) {\n      &.is-circle {\n        --calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);\n        --calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);\n      }\n    }\n\n    &.image--slotted {\n      &:not(.is-circle) {\n        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      }\n\n      &:has(.chip-icon),\n      &.text--slotted,\n      &.closable {\n        --calcite-internal-chip-image-space-x-end: 0.375rem /* 6px */;\n      }\n    }\n\n    &.selectable.single:not(.is-circle) {\n      &.image--slotted {\n        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      }\n      &.selected {\n        --calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);\n        --calcite-internal-chip-select-space-x-start: 0;\n\n        &.image--slotted {\n          --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n          --calcite-internal-chip-select-space-x-start: 0.375rem /* 6px */;\n        }\n      }\n    }\n\n    &.multiple:not(.is-circle) {\n      --calcite-internal-chip-select-space-x-end: 0.125rem /* 2px */;\n      --calcite-internal-chip-select-space-x-start: 0.125rem /* 2px */;\n\n      &.image--slotted {\n        --calcite-internal-chip-select-space-x-end: 0.5rem /* 8px */;\n        --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;\n      }\n    }\n\n    &.closable:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;\n    }\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    --calcite-internal-chip-block-size: 2.75rem /* 44px */;\n    --calcite-internal-chip-container-space-x-end: 0.5rem /* 8px */;\n    --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;\n    --calcite-internal-chip-font-size: var(--calcite-font-size-0);\n    --calcite-internal-chip-icon-size: 2rem /* 32px */;\n    --calcite-internal-chip-icon-space: 0.5rem /* 8px */;\n    --calcite-internal-chip-image-size: 2rem /* 32px */;\n    --calcite-internal-chip-title-space: 0.5rem /* 8px */;\n    --calcite-internal-close-size: 2rem /* 32px */;\n\n    &:not(.closable) {\n      &.is-circle {\n        --calcite-internal-chip-container-space-x-end: 0.25rem /* 4px */;\n        --calcite-internal-chip-container-space-x-start: 0.25rem /* 4px */;\n      }\n    }\n\n    &.image--slotted {\n      &:not(.is-circle) {\n        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;\n      }\n\n      &:has(.chip-icon),\n      &.text--slotted,\n      &.closable {\n        --calcite-internal-chip-image-space-x-end: 0.5rem /* 8px */;\n      }\n    }\n\n    &.selectable.single:not(.is-circle) {\n      &.image--slotted {\n        --calcite-internal-chip-container-space-x-start: 0.375rem /* 6px */;\n      }\n      &.selected {\n        --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n        --calcite-internal-chip-select-space-x-start: 0;\n\n        &.image--slotted {\n          --calcite-internal-chip-select-space-x-end: 0.375rem /* 6px */;\n          --calcite-internal-chip-select-space-x-start: 0.5rem /* 8px */;\n        }\n      }\n    }\n\n    &.multiple:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-start: 0.5rem /* 8px */;\n\n      --calcite-internal-chip-select-space-x-end: 0.25rem /* 4px */;\n      --calcite-internal-chip-select-space-x-start: 0.25rem /* 4px */;\n\n      &.image--slotted {\n        --calcite-internal-chip-select-space-x-end: 0.75rem /* 12px */;\n      }\n    }\n\n    &.closable:not(.is-circle) {\n      --calcite-internal-chip-container-space-x-end: 0.375rem /* 6px */;\n    }\n  }\n}\n\n// Sub-element styles\n.container {\n  @apply inline-flex\n  h-full\n  max-w-full\n  items-center\n  focus-base\n  justify-center\n  box-border\n  font-medium;\n\n  border-radius: var(--calcite-chip-corner-radius, 9999px);\n  border-width: var(--calcite-border-width-sm);\n  border-style: solid;\n  font-size: var(--calcite-internal-chip-font-size, var(--calcite-font-size));\n  padding-inline-start: var(--calcite-internal-chip-container-space-x-start);\n  padding-inline-end: var(--calcite-internal-chip-container-space-x-end);\n  block-size: var(--calcite-internal-chip-block-size, auto);\n  inline-size: var(--calcite-internal-chip-inline-size, auto);\n  min-inline-size: var(--calcite-internal-chip-block-size, auto);\n\n  &:hover .select-icon--active {\n    opacity: 1;\n  }\n\n  &.selectable {\n    @apply cursor-pointer;\n  }\n  &:not(.non-interactive):focus {\n    @apply focus-outset;\n  }\n\n  &.text--slotted .title {\n    @apply truncate;\n  }\n\n  &:not(.text--slotted) .title,\n  &:not(.image--slotted) .image-container {\n    display: none;\n  }\n\n  &.is-circle {\n    .chip-icon,\n    .image-container {\n      padding: 0;\n    }\n  }\n}\n\n.title {\n  padding-inline: var(--calcite-internal-chip-title-space);\n}\n\n.image-container {\n  @apply inline-flex overflow-hidden;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  block-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);\n  inline-size: var(--calcite-internal-chip-image-size, 1.5rem /* 24px */);\n  padding-inline-start: 0;\n  padding-inline-end: var(--calcite-internal-chip-image-space-x-end, 0);\n}\n\n.chip-icon {\n  @apply relative my-0 inline-flex duration-150 ease-in-out;\n  color: var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, currentColor)));\n  padding-inline: var(--calcite-internal-chip-icon-space, 0.375rem /* 6px */);\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: absolute;\n  visibility: hidden;\n  inline-size: auto;\n  opacity: 0;\n  transition:\n    opacity 0.15s ease-in-out,\n    inline-size 0.15s ease-in-out;\n  color: var(--calcite-chip-select-icon-color, currentColor);\n\n  &.select-icon--active {\n    position: relative;\n    visibility: visible;\n    opacity: 0.5;\n    color: var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor));\n  }\n}\n\n.multiple .select-icon {\n  @apply flex justify-center items-center;\n}\n\n.multiple .select-icon,\n.single .select-icon--active {\n  padding-inline-start: var(--calcite-internal-chip-select-space-x-start);\n  padding-inline-end: var(--calcite-internal-chip-select-space-x-end);\n  block-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);\n  inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);\n}\n\nslot[name=\"image\"]::slotted(*) {\n  @apply rounded-half flex h-full w-full overflow-hidden;\n}\n\n@include close-button(\n  var(--calcite-internal-close-size, 1.5rem),\n  0,\n  var(\n    --calcite-chip-close-icon-color,\n    var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color, var(--calcite-color-text-1)))\n  )\n);\n@include disabled();\n@include base-component();\n","import {\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 { Appearance, Kind, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { getIconScale } from \"../../utils/component\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ChipMessages } from \"./assets/chip/t9n\";\nimport { CSS, SLOTS, ICONS } from \"./resources\";\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 InteractiveComponent, LoadableComponent, LocalizedComponent, 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: IconNameOrString;\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  @Watch(\"selected\")\n  watchSelected(selected: boolean): void {\n    if (this.selectionMode === \"none\") {\n      return;\n    }\n    this.handleSelectionPropertyChange(selected);\n  }\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   * @internal\n   */\n  @Prop() parentChipGroup: HTMLCalciteChipGroupElement;\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  // --------------------------------------------------------------------------\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   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalSyncSelectedChips: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    if (this.selectionMode !== \"none\" && this.interactive && this.selected) {\n      this.handleSelectionPropertyChange(this.selected);\n    }\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (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 handleDefaultSlotChange = (): void => {\n    this.updateHasText();\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  private handleSelectionPropertyChange(selected: boolean): void {\n    if (this.selectionMode === \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\n    }\n    const selectedInParent = this.parentChipGroup.selectedItems.includes(this.el);\n\n    if (!selectedInParent && selected && this.selectionMode !== \"multiple\") {\n      this.calciteInternalChipSelect.emit();\n    }\n    if (this.selectionMode !== \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\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\"\n        ? this.selected\n          ? ICONS.checkedMultiple\n          : ICONS.uncheckedMultiple\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        ref={(el) => (this.closeButtonEl = el)}\n        tabIndex={this.disabled ? -1 : 0}\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-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.single]:\n                this.selectionMode === \"single\" || this.selectionMode === \"single-persist\",\n              [CSS.selected]: this.selected,\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            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={disableInteraction ? -1 : 0}\n          >\n            {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n            {this.renderChipImage()}\n            {this.icon && this.renderIcon()}\n            <span class={CSS.title}>\n              <slot onSlotchange={this.handleDefaultSlotChange} />\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/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.13.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as Color, s as isLonghandHex, u as isShorthandHex, i as isValidHex, v as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, w as hexChar, O as OPACITY_LIMITS, e 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/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.13.2
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as Color, a as hexify } from './utils.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.13.2
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { g as guid } from './guid.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/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.13.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

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/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.13.2
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { d as calciteSize48 } from './core.js';
@@ -1039,7 +1039,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
         const single = isSingleLike(selectionMode);
         const selectedItem = selectedItems[0];
-        const showLabel = !open && single && !!selectedItem;
+        const showLabel = !open && single && !!selectedItem && !this.filterText;
         return (h("span", { class: {
                 "input-wrap": true,
                 "input-wrap--single": single,
@@ -1049,7 +1049,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             }, key: "label" }, getLabel(selectedItem))), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-errormessage": IDS.validationMessage, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
                 [CSS$1.input]: true,
                 "input--single": true,
-                "input--hidden": showLabel,
+                [CSS$1.inputHidden]: showLabel,
                 "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
             }, "data-test-id": "input", disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, readOnly: this.readOnly, ref: (el) => (this.textInput = el), role: "combobox", tabindex: this.activeChipIndex === -1 ? 0 : -1, type: "text", value: this.filterText })));
     }
@@ -1089,7 +1089,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && this.value?.length > 0;
-        return (h(Host, { key: '7ff11391145f9d35bb29b79668ba4c71383399cb', onClick: this.comboboxFocusHandler }, h(InteractiveContainer, { key: '0f933e31620dcb729c99290edfa9c0d48ed8f3d0', disabled: this.disabled }, h("div", { key: '8b50c921f9f45393064744fa38874de7de82a228', "aria-live": "polite", class: {
+        return (h(Host, { key: 'f1671f542a84291771bcd4096557300397e67138', onClick: this.comboboxFocusHandler }, h(InteractiveContainer, { key: 'd176f33343ad19474922e3274f28deae9c0a4fd9', disabled: this.disabled }, h("div", { key: 'f93285d693a11fb8cec1ed8d1b93b2f66c7ab2dd', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -1103,7 +1103,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], h("label", { key: '07bc9e86da71217b892740f0748117f5bf1eacb3', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), h("ul", { key: '5f367649d90d63c5cf88d097786c849430dc1e49', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { key: '97f799527df82ab6def23e012663050e0156626a', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], h("label", { key: 'a5cf9dddce6a299fb7a42721f6c5e02ae754ea6e', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), h("ul", { key: '6c0673c3b470c0a2a84b25cb8a90074db7548741', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { key: '140469ee4ef16d89edb506b133b4316e8a9d7277', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }