@esri/calcite-components 2.8.0-next.1 → 2.8.0-next.2

package/dist/components/calcite-value-list-item.js.map

@@ -1 +1 @@
-{"file":"calcite-value-list-item.js","mappings":";;;;;;;;;;;;;;;;;AAAO,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE,MAAM;CACb,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;CAC9B;;ACPD,MAAM,gBAAgB,GAAG,gqEAAgqE,CAAC;AAC1rE,mCAAe,gBAAgB;;MC8ClB,aAAa;;;;;;;;QA6ExB,iBAAY,GAAmC,IAAI,CAAC;QAIpD,SAAI,GAAG,2BAA2B,IAAI,EAAE,EAAE,CAAC;;;;;;QA8F3C,mBAAc,GAAG,CAAC,EAAkC,MACjD,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;QAE3B,kBAAa,GAAG,CAAC,KAAoB;YACnC,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACrB,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;aAC9C;SACF,CAAC;QAEF,eAAU,GAAG;YACX,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,kCAAkC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;SACxF,CAAC;QAEF,uBAAkB,GAAG,CAAC,KAAkB;YACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;SACvC,CAAC;;wBA9KkC,KAAK;gCAKd,KAAK;8BAKU,KAAK;+BAKH,KAAK;oBAOG,IAAI;2BAGjB,KAAK;;;yBAeP,KAAK;wBAKS,KAAK;;;;;;;;IA2BxD,iBAAiB;QACf,+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,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;;;;;;;IAeD,MAAM,cAAc,CAAC,MAAgB;QACnC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;KAC1C;;IAID,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,OAAO,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC;KACtC;IA8BD,4BAA4B,CAAC,KAAkB;;QAE7C,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;KAC7B;;;;;;IAgCD,gBAAgB;QACd,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QACpB,MAAM,aAAa,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAEvD,OAAO,aAAa,IAClB,YAAM,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAEA,OAAe,CAAC,UAAU,GAAI,IAChE,IAAI,CAAC;KACV;IAED,kBAAkB;QAChB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QACpB,MAAM,eAAe,GAAG,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;QAE3D,OAAO,eAAe,IACpB,YAAM,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,IAAI,EAAEA,OAAe,CAAC,YAAY,GAAI,IACpE,IAAI,CAAC;KACV;IAED,YAAY;QACV,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE;YAC5B,QACE,YACE,KAAK,EAAE;oBACL,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI;oBAClB,CAAC,GAAG,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe;iBAC5C,0BAED,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG;;gBAEZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAqB,CAAC,IAEpD,oBAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,CAC7D,EACP;SACH;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,IAC/B,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC1C,IAAI,CAAC,YAAY,EAAE,EACpB,+EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,uBAAuB,EAAE,IAAI,CAAC,kBAAkB,EAChD,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK;;YAEjB,GAAG,EAAE,IAAI,CAAC,cAAc,IAEvB,IAAI,CAAC,kBAAkB,EAAE,EACzB,IAAI,CAAC,gBAAgB,EAAE,CACD,CACJ,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PICK_LIST_SLOTS"],"sources":["src/components/value-list-item/resources.ts","src/components/value-list-item/value-list-item.scss?tag=calcite-value-list-item&encapsulation=shadow","src/components/value-list-item/value-list-item.tsx"],"sourcesContent":["export const ICONS = {\n  drag: \"drag\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  actionsStart: \"actions-start\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1\n    shadow-border-bottom\n    mb-px\n    box-border\n    flex;\n  transition:\n    background-color var(--calcite-animation-timing),\n    box-shadow var(--calcite-animation-timing);\n  * {\n    @apply box-border;\n  }\n}\n\ncalcite-pick-list-item {\n  @apply relative\n    m-0\n    flex-grow\n    shadow-none;\n}\n\n:host([active]),\n:host([selected]) {\n  @apply shadow-outline-active;\n}\n\n.handle {\n  @apply flex\n    cursor-move\n    items-center\n    justify-center\n    border-none\n    bg-transparent\n    py-0\n    px-1;\n  color: theme(\"borderColor.color.input\");\n  &:hover {\n    @apply bg-foreground-2 text-color-1;\n  }\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n  &--activated {\n    @apply bg-foreground-3 text-color-1;\n  }\n  calcite-icon {\n    color: inherit;\n  }\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  VNode,\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 {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS, SLOTS as PICK_LIST_SLOTS } from \"../pick-list-item/resources\";\nimport { ICON_TYPES } from \"../pick-list/resources\";\nimport { ListItemAndHandle } from \"./interfaces\";\nimport { ICONS, SLOTS } from \"./resources\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.\n */\n@Component({\n  tag: \"calcite-value-list-item\",\n  styleUrl: \"value-list-item.scss\",\n  shadow: true,\n})\nexport class ValueListItem\n  implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * A description for the component that displays below the label text.\n   */\n  @Prop({ reflect: true }) description?: string;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * @internal\n   */\n  @Prop() deselectDisabled = false;\n\n  /**\n   * When `true`, prevents the content of the component from user interaction.\n   */\n  @Prop({ reflect: true }) nonInteractive = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) handleActivated? = false;\n\n  /**\n   * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.\n   *\n   * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5)\n   */\n  @Prop({ reflect: true }) icon?: ICON_TYPES | null = null;\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  /**\n   * Label and accessible name for the component. Appears next to the icon.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /**\n   * Provides additional metadata to the component. Primary use is for a filter on the parent list.\n   */\n  @Prop() metadata?: Record<string, unknown>;\n\n  /**\n   * When `true`, adds an action to remove the component.\n   */\n  @Prop({ reflect: true }) removable = false;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /**\n   * The component's value.\n   */\n  @Prop() value!: any;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListItemElement;\n\n  pickListItem: HTMLCalcitePickListItemElement = null;\n\n  handleEl: HTMLSpanElement;\n\n  guid = `calcite-value-list-item-${guid()}`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(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  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Toggle the selection state. By default this won't trigger an event.\n   * The first argument allows the value to be coerced, rather than swapping values.\n   *\n   * @param coerce\n   */\n  @Method()\n  async toggleSelected(coerce?: boolean): Promise<void> {\n    this.pickListItem.toggleSelected(coerce);\n  }\n\n  /** Set focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return this.pickListItem?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is selected or unselected.\n   */\n  @Event({ cancelable: false }) calciteListItemChange: EventEmitter<{\n    item: HTMLCalciteValueListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }>;\n\n  /**\n   * Fires when the remove button is pressed.\n   */\n  @Event({ cancelable: true }) calciteListItemRemove: EventEmitter<void>; // wrapped pick-list-item emits this\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteValueListItemDragHandleBlur: EventEmitter<ListItemAndHandle>;\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    // adjust item payload from wrapped item before bubbling\n    event.detail.item = this.el;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getPickListRef = (el: HTMLCalcitePickListItemElement): HTMLCalcitePickListItemElement =>\n    (this.pickListItem = el);\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === \" \") {\n      this.handleActivated = !this.handleActivated;\n    }\n  };\n\n  handleBlur = (): void => {\n    this.handleActivated = false;\n    this.calciteValueListItemDragHandleBlur.emit({ item: this.el, handle: this.handleEl });\n  };\n\n  handleSelectChange = (event: CustomEvent): void => {\n    this.selected = event.detail.selected;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsEnd(): VNode {\n    const { el } = this;\n    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);\n\n    return hasActionsEnd ? (\n      <slot name={SLOTS.actionsEnd} slot={PICK_LIST_SLOTS.actionsEnd} />\n    ) : null;\n  }\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);\n\n    return hasActionsStart ? (\n      <slot name={SLOTS.actionsStart} slot={PICK_LIST_SLOTS.actionsStart} />\n    ) : null;\n  }\n\n  renderHandle(): VNode {\n    const { icon, iconFlipRtl } = this;\n    if (icon === ICON_TYPES.grip) {\n      return (\n        <span\n          class={{\n            [CSS.handle]: true,\n            [CSS.handleActivated]: this.handleActivated,\n          }}\n          data-js-handle\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n          role=\"button\"\n          tabindex=\"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.handleEl = el as HTMLSpanElement)}\n        >\n          <calcite-icon flipRtl={iconFlipRtl} icon={ICONS.drag} scale=\"s\" />\n        </span>\n      );\n    }\n  }\n\n  render(): VNode {\n    return (\n      <Host id={this.el.id || this.guid}>\n        <InteractiveContainer disabled={this.disabled}>\n          {this.renderHandle()}\n          <calcite-pick-list-item\n            description={this.description}\n            deselectDisabled={this.deselectDisabled}\n            disabled={this.disabled}\n            label={this.label}\n            metadata={this.metadata}\n            nonInteractive={this.nonInteractive}\n            onCalciteListItemChange={this.handleSelectChange}\n            removable={this.removable}\n            selected={this.selected}\n            value={this.value}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.getPickListRef}\n          >\n            {this.renderActionsStart()}\n            {this.renderActionsEnd()}\n          </calcite-pick-list-item>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-value-list-item.js","mappings":"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","names":["PICK_LIST_SLOTS"],"sources":["src/components/value-list-item/resources.ts","src/components/value-list-item/value-list-item.scss?tag=calcite-value-list-item&encapsulation=shadow","src/components/value-list-item/value-list-item.tsx"],"sourcesContent":["export const ICONS = {\n  drag: \"drag\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  actionsStart: \"actions-start\",\n};\n",":host {\n  @apply bg-foreground-1\n    text-color-2\n    text-n1\n    shadow-border-bottom\n    mb-px\n    box-border\n    flex;\n  transition:\n    background-color var(--calcite-animation-timing),\n    box-shadow var(--calcite-animation-timing);\n  * {\n    @apply box-border;\n  }\n}\n\ncalcite-pick-list-item {\n  @apply relative\n    m-0\n    flex-grow\n    shadow-none;\n}\n\n:host([active]),\n:host([selected]) {\n  @apply shadow-outline-active;\n}\n\n.handle {\n  @apply flex\n    cursor-move\n    items-center\n    justify-center\n    border-none\n    bg-transparent\n    py-0\n    px-1;\n  color: theme(\"borderColor.color.input\");\n  &:hover {\n    @apply bg-foreground-2 text-color-1;\n  }\n  @apply focus-base;\n  &:focus {\n    @apply focus-inset;\n  }\n  &--activated {\n    @apply bg-foreground-3 text-color-1;\n  }\n  calcite-icon {\n    color: inherit;\n  }\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  VNode,\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 {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { CSS, SLOTS as PICK_LIST_SLOTS } from \"../pick-list-item/resources\";\nimport { ICON_TYPES } from \"../pick-list/resources\";\nimport { ListItemAndHandle } from \"./interfaces\";\nimport { ICONS, SLOTS } from \"./resources\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.\n */\n@Component({\n  tag: \"calcite-value-list-item\",\n  styleUrl: \"value-list-item.scss\",\n  shadow: true,\n})\nexport class ValueListItem\n  implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * A description for the component that displays below the label text.\n   */\n  @Prop({ reflect: true }) description?: string;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * @internal\n   */\n  @Prop() deselectDisabled = false;\n\n  /**\n   * When `true`, prevents the content of the component from user interaction.\n   */\n  @Prop({ reflect: true }) nonInteractive = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) handleActivated? = false;\n\n  /**\n   * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.\n   *\n   * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5)\n   */\n  @Prop({ reflect: true }) icon?: ICON_TYPES | null = null;\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  /**\n   * Label and accessible name for the component. Appears next to the icon.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /**\n   * Provides additional metadata to the component. Primary use is for a filter on the parent list.\n   */\n  @Prop() metadata?: Record<string, unknown>;\n\n  /**\n   * When `true`, adds an action to remove the component.\n   */\n  @Prop({ reflect: true }) removable = false;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /**\n   * The component's value.\n   */\n  @Prop() value!: any;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListItemElement;\n\n  pickListItem: HTMLCalcitePickListItemElement = null;\n\n  handleEl: HTMLSpanElement;\n\n  guid = `calcite-value-list-item-${guid()}`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(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  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Toggle the selection state. By default this won't trigger an event.\n   * The first argument allows the value to be coerced, rather than swapping values.\n   *\n   * @param coerce\n   */\n  @Method()\n  async toggleSelected(coerce?: boolean): Promise<void> {\n    this.pickListItem.toggleSelected(coerce);\n  }\n\n  /** Set focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return this.pickListItem?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is selected or unselected.\n   */\n  @Event({ cancelable: false }) calciteListItemChange: EventEmitter<{\n    item: HTMLCalciteValueListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }>;\n\n  /**\n   * Fires when the remove button is pressed.\n   */\n  @Event({ cancelable: true }) calciteListItemRemove: EventEmitter<void>; // wrapped pick-list-item emits this\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteValueListItemDragHandleBlur: EventEmitter<ListItemAndHandle>;\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    // adjust item payload from wrapped item before bubbling\n    event.detail.item = this.el;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getPickListRef = (el: HTMLCalcitePickListItemElement): HTMLCalcitePickListItemElement =>\n    (this.pickListItem = el);\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === \" \") {\n      this.handleActivated = !this.handleActivated;\n    }\n  };\n\n  handleBlur = (): void => {\n    this.handleActivated = false;\n    this.calciteValueListItemDragHandleBlur.emit({ item: this.el, handle: this.handleEl });\n  };\n\n  handleSelectChange = (event: CustomEvent): void => {\n    this.selected = event.detail.selected;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsEnd(): VNode {\n    const { el } = this;\n    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);\n\n    return hasActionsEnd ? (\n      <slot name={SLOTS.actionsEnd} slot={PICK_LIST_SLOTS.actionsEnd} />\n    ) : null;\n  }\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);\n\n    return hasActionsStart ? (\n      <slot name={SLOTS.actionsStart} slot={PICK_LIST_SLOTS.actionsStart} />\n    ) : null;\n  }\n\n  renderHandle(): VNode {\n    const { icon, iconFlipRtl } = this;\n    if (icon === ICON_TYPES.grip) {\n      return (\n        <span\n          class={{\n            [CSS.handle]: true,\n            [CSS.handleActivated]: this.handleActivated,\n          }}\n          data-js-handle\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n          role=\"button\"\n          tabindex=\"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.handleEl = el as HTMLSpanElement)}\n        >\n          <calcite-icon flipRtl={iconFlipRtl} icon={ICONS.drag} scale=\"s\" />\n        </span>\n      );\n    }\n  }\n\n  render(): VNode {\n    return (\n      <Host id={this.el.id || this.guid}>\n        <InteractiveContainer disabled={this.disabled}>\n          {this.renderHandle()}\n          <calcite-pick-list-item\n            description={this.description}\n            deselectDisabled={this.deselectDisabled}\n            disabled={this.disabled}\n            label={this.label}\n            metadata={this.metadata}\n            nonInteractive={this.nonInteractive}\n            onCalciteListItemChange={this.handleSelectChange}\n            removable={this.removable}\n            selected={this.selected}\n            value={this.value}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.getPickListRef}\n          >\n            {this.renderActionsStart()}\n            {this.renderActionsEnd()}\n          </calcite-pick-list-item>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-value-list.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.8.0-next.1
+ * v2.8.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
@@ -24,10 +24,9 @@ const CSS = {
     container: "container",
     handle: "handle",
 };
-var ICON_TYPES;
-(function (ICON_TYPES) {
-    ICON_TYPES["grip"] = "grip";
-})(ICON_TYPES || (ICON_TYPES = {}));
+const ICON_TYPES = {
+    grip: "grip",
+};
 
 function getScreenReaderText(item, status, valueList) {
     const { items, messages } = valueList;
@@ -297,7 +296,7 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class ValueList extends HTMLE
         event.stopPropagation();
     }
     render() {
-        return (h(List, { key: 'a4e0ffe64e64896336fb0722e1be352623e0ab41', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
+        return (h(List, { key: 'c212dc4be12b594c4cc69a8a368c523d3187c289', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/calcite-value-list.js.map

@@ -1 +1 @@
-{"file":"calcite-value-list.js","mappings":"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","names":[],"sources":["src/components/value-list/resources.ts","src/components/value-list/utils.ts","src/components/value-list/value-list.scss?tag=calcite-value-list&encapsulation=shadow","src/components/value-list/value-list.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  handle: \"handle\",\n};\nexport enum ICON_TYPES {\n  grip = \"grip\",\n}\nexport const TEXT = {\n  filterResults: \"Filter results\",\n};\n","import { getItemIndex } from \"../pick-list/shared-list-logic\";\nimport { DragStatus } from \"./interfaces\";\nimport { ValueList } from \"./value-list\";\n\nexport function getScreenReaderText(\n  item: HTMLCalciteValueListItemElement,\n  status: DragStatus,\n  valueList: ValueList<HTMLCalciteValueListItemElement>,\n): string {\n  const { items, messages } = valueList;\n\n  const total = items.length;\n  const position = getItemIndex(valueList, item) + 1;\n  const template =\n    status === \"idle\"\n      ? messages.dragHandleIdle\n      : status === \"active\"\n        ? messages.dragHandleActive\n        : status === \"change\"\n          ? messages.dragHandleChange\n          : messages.dragHandleCommit;\n\n  return replacePlaceholders(template, item.label, position, total);\n}\n\nexport function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {\n  handle: HTMLCalciteHandleElement;\n  item: HTMLCalciteValueListItemElement;\n} {\n  const handle = event\n    .composedPath()\n    .find((item: HTMLElement) => item.dataset?.jsHandle !== undefined) as HTMLCalciteHandleElement;\n\n  const item = event\n    .composedPath()\n    .find(\n      (item: HTMLElement) => item.tagName?.toLowerCase() === \"calcite-value-list-item\",\n    ) as HTMLCalciteValueListItemElement;\n\n  return { handle, item };\n}\n\nexport function replacePlaceholders(text: string, label: string, position: number, total: number): string {\n  const replacePosition = text.replace(\"{position}\", position.toString());\n  const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n  return replaceLabel.replace(\"{total}\", total.toString());\n}\n",":host {\n  @apply text-color-2\n    text-n1\n    relative\n    box-border\n    flex\n    flex-shrink-0\n    flex-grow-0\n    flex-col\n    items-stretch\n    bg-transparent;\n  * {\n    @apply box-border;\n  }\n}\n\n@include disabled();\n\ncalcite-value-list-item:last-of-type {\n  @apply shadow-none;\n}\n\n:host([filter-enabled]) header {\n  @apply bg-foreground-1\n    mb-1\n    flex\n    items-center\n    justify-end;\n  &.sticky-pos {\n    @apply sticky top-0 z-sticky;\n  }\n  @apply shadow-border-bottom;\n}\n\ncalcite-filter {\n  @apply mb-px;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  calciteInternalListItemValueChangeHandler,\n  calciteListFocusOutHandler,\n  calciteListItemChangeHandler,\n  cleanUpObserver,\n  deselectRemovedItems,\n  deselectSiblingItems,\n  getItemData,\n  handleFilter,\n  handleFilterEvent,\n  handleInitialFilter,\n  initialize,\n  initializeObserver,\n  ItemData,\n  keyDownHandler,\n  ListFocusId,\n  moveItemIndex,\n  mutationObserverCallback,\n  removeItem,\n  selectSiblings,\n  setFocus,\n  setUpItems,\n} from \"../pick-list/shared-list-logic\";\nimport List from \"../pick-list/shared-list-render\";\nimport { ListItemAndHandle } from \"../value-list-item/interfaces\";\nimport {\n  DragDetail,\n  connectSortableComponent,\n  disconnectSortableComponent,\n  SortableComponent,\n  dragActive,\n} from \"../../utils/sortableComponent\";\nimport { focusElement } from \"../../utils/dom\";\nimport { ValueListMessages } from \"./assets/value-list/t9n\";\nimport { CSS, ICON_TYPES } from \"./resources\";\nimport { getHandleAndItemElement, getScreenReaderText } from \"./utils\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.\n * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.\n */\n@Component({\n  tag: \"calcite-value-list\",\n  styleUrl: \"value-list.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ValueList<\n    ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement,\n  >\n  implements\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent,\n    SortableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When provided, the method will be called to determine whether the element can move from the list.\n   */\n  @Prop() canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * When provided, the method will be called to determine whether the element can be added from another list.\n   */\n  @Prop() canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * When `true`, `calcite-value-list-item`s are sortable via a draggable button.\n   */\n  @Prop({ reflect: true }) dragEnabled = false;\n\n  /**\n   * The currently filtered items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];\n\n  /**\n   * The currently filtered data.\n   *\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ mutable: true }) filteredData: ItemData = [];\n\n  /**\n   * When `true`, an input appears at the top of the component that can be used by end users to filter list items.\n   */\n  @Prop({ reflect: true }) filterEnabled = false;\n\n  /**\n   * Placeholder text for the filter's input field.\n   */\n  @Prop({ reflect: true }) filterPlaceholder: string;\n\n  /**\n   * Text for the filter input field.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ reflect: true, mutable: true }) filterText: string;\n\n  /**\n   * The component's group identifier.\n   *\n   * To drag elements from one list into another, both lists must have the same group value.\n   */\n  @Prop({ reflect: true }) group?: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Similar to standard radio buttons and checkboxes.\n   * When `true`, a user can select multiple `calcite-value-list-item`s at a time.\n   * When `false`, only a single `calcite-value-list-item` can be selected at a time,\n   * and a new selection will deselect previous selections.\n   */\n  @Prop({ reflect: true }) multiple = false;\n\n  /**\n   * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.\n   */\n  @Prop({ reflect: true }) selectionFollowsFocus = 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<ValueListMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ValueListMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListElement;\n\n  @State() dataForFilter: ItemData = [];\n\n  @State() defaultMessages: ValueListMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() selectedValues: Map<string, ItemElement> = new Map();\n\n  items: ItemElement[];\n\n  lastSelectedItem: ItemElement = null;\n\n  mutationObserver = createObserver(\"mutation\", mutationObserverCallback.bind(this));\n\n  sortable: Sortable;\n\n  emitCalciteListChange: () => void;\n\n  emitCalciteListFilter: () => void;\n\n  filterEl: HTMLCalciteFilterElement;\n\n  assistiveTextEl: HTMLSpanElement;\n\n  handleSelector = `.${CSS.handle}`;\n\n  dragSelector = \"calcite-value-list-item\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    initialize.call(this);\n    initializeObserver.call(this);\n    this.setUpSorting();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    handleInitialFilter.call(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    disconnectInteractive(this);\n    disconnectSortableComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    cleanUpObserver.call(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when any of the list item selections have changed.\n   */\n  @Event({ cancelable: false }) calciteListChange: EventEmitter<\n    Map<string, HTMLCalciteValueListItemElement>\n  >;\n\n  /**\n   * Emits when the order of the list has changed.\n   */\n  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<any[]>;\n\n  /**\n   * Emits when a filter has changed.\n   */\n  @Event({ cancelable: false }) calciteListFilter: EventEmitter<void>;\n\n  @Listen(\"focusout\")\n  calciteListFocusOutHandler(event: FocusEvent): void {\n    calciteListFocusOutHandler.call(this, event);\n  }\n\n  @Listen(\"calciteListItemRemove\")\n  calciteListItemRemoveHandler(event: CustomEvent<void>): void {\n    removeItem.call(this, event);\n  }\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    calciteListItemChangeHandler.call(this, event);\n  }\n\n  @Listen(\"calciteInternalListItemPropsChange\")\n  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void {\n    event.stopPropagation();\n    this.setUpFilter();\n  }\n\n  @Listen(\"calciteInternalListItemValueChange\")\n  calciteInternalListItemValueChangeHandler(event: CustomEvent): void {\n    calciteInternalListItemValueChangeHandler.call(this, event);\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onGlobalDragStart(): void {\n    cleanUpObserver.call(this);\n  }\n\n  onGlobalDragEnd(): void {\n    initializeObserver.call(this);\n  }\n\n  onDragEnd(): void {}\n\n  onDragStart(): void {}\n\n  onDragSort(): void {\n    this.items = Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n    const values = this.items.map((item) => item.value);\n    this.calciteListOrderChange.emit(values);\n  }\n\n  getItems(): ItemElement[] {\n    return Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n  }\n\n  setUpItems(): void {\n    setUpItems.call(this, \"calcite-value-list-item\");\n    this.setUpSorting();\n  }\n\n  setUpFilter(): void {\n    if (this.filterEnabled) {\n      this.dataForFilter = this.getItemData();\n    }\n  }\n\n  setFilterEl = (el: HTMLCalciteFilterElement): void => {\n    this.filterEl = el;\n  };\n\n  setFilteredItems = (filteredItems: HTMLCalciteValueListItemElement[]): void => {\n    this.filteredItems = filteredItems;\n  };\n\n  setUpSorting(): void {\n    const { dragEnabled } = this;\n\n    if (!dragEnabled) {\n      return;\n    }\n\n    connectSortableComponent(this);\n  }\n\n  deselectRemovedItems = deselectRemovedItems.bind(this);\n\n  deselectSiblingItems = deselectSiblingItems.bind(this);\n\n  selectSiblings = selectSiblings.bind(this);\n\n  handleFilter = handleFilter.bind(this);\n\n  handleFilterEvent = handleFilterEvent.bind(this);\n\n  getItemData = getItemData.bind(this);\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const { handle, item } = getHandleAndItemElement(event);\n    if (handle && !item.handleActivated && event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"commit\", this));\n    }\n\n    if (!handle || !item.handleActivated) {\n      keyDownHandler.call(this, event);\n      return;\n    }\n\n    event.preventDefault();\n\n    const { items } = this;\n\n    if (event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"active\", this));\n    }\n\n    if ((event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") || items.length <= 1) {\n      return;\n    }\n\n    const { el } = this;\n    const nextIndex = moveItemIndex(this, item, event.key === \"ArrowUp\" ? \"up\" : \"down\");\n    if (nextIndex === items.length - 1) {\n      el.appendChild(item);\n    } else {\n      const itemAtNextIndex = el.children[nextIndex];\n      const insertionReferenceItem =\n        itemAtNextIndex === item.nextElementSibling\n          ? itemAtNextIndex.nextElementSibling\n          : itemAtNextIndex;\n      el.insertBefore(item, insertionReferenceItem);\n    }\n\n    this.items = this.getItems();\n    this.calciteListOrderChange.emit(this.items.map(({ value }) => value));\n\n    requestAnimationFrame(() => focusElement(handle));\n    item.handleActivated = true;\n\n    this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"change\", this));\n  };\n\n  handleBlur(): void {\n    if (this.dragEnabled) {\n      this.updateScreenReaderText(\"\");\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Returns the component's selected items. */\n  @Method()\n  async getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   *\n   * @param focusId\n   */\n  @Method()\n  async setFocus(focusId?: ListFocusId): Promise<void> {\n    await componentFocusable(this);\n\n    return setFocus.call(this, focusId);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getIconType(): ICON_TYPES | null {\n    let type = null;\n    if (this.dragEnabled) {\n      type = ICON_TYPES.grip;\n    }\n    return type;\n  }\n\n  updateScreenReaderText(text: string): void {\n    this.assistiveTextEl.textContent = text;\n  }\n\n  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void {\n    handleElement.ariaLabel = text;\n  }\n\n  storeAssistiveEl = (el: HTMLSpanElement): void => {\n    this.assistiveTextEl = el;\n  };\n\n  handleFocusIn = (event: FocusEvent): void => {\n    const { handle, item } = getHandleAndItemElement(event);\n    if (!item?.handleActivated && item && handle) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n  };\n\n  @Listen(\"calciteValueListItemDragHandleBlur\")\n  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {\n    const { item, handle } = event.detail;\n    if (!item?.handleActivated && item) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n    event.stopPropagation();\n  }\n\n  render(): VNode {\n    return (\n      <List\n        onBlur={this.handleBlur}\n        onFocusin={this.handleFocusIn}\n        onKeyDown={this.keyDownHandler}\n        props={this}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-value-list.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAEO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEK,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,MAAM;CACb;;SCLe,mBAAmB,CACjC,IAAqC,EACrC,MAAkB,EAClB,SAAqD;IAErD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAEtC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,MAAM,QAAQ,GAAG,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACnD,MAAM,QAAQ,GACZ,MAAM,KAAK,MAAM;UACb,QAAQ,CAAC,cAAc;UACvB,MAAM,KAAK,QAAQ;cACjB,QAAQ,CAAC,gBAAgB;cACzB,MAAM,KAAK,QAAQ;kBACjB,QAAQ,CAAC,gBAAgB;kBACzB,QAAQ,CAAC,gBAAgB,CAAC;IAEpC,OAAO,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AACpE,CAAC;SAEe,uBAAuB,CAAC,KAAiC;IAIvE,MAAM,MAAM,GAAG,KAAK;SACjB,YAAY,EAAE;SACd,IAAI,CAAC,CAAC,IAAiB,KAAK,IAAI,CAAC,OAAO,EAAE,QAAQ,KAAK,SAAS,CAA6B,CAAC;IAEjG,MAAM,IAAI,GAAG,KAAK;SACf,YAAY,EAAE;SACd,IAAI,CACH,CAAC,IAAiB,KAAK,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,yBAAyB,CAC9C,CAAC;IAEvC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAC;SAEe,mBAAmB,CAAC,IAAY,EAAE,KAAa,EAAE,QAAgB,EAAE,KAAa;IAC9F,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACnE,OAAO,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC3D;;AC9CA,MAAM,YAAY,GAAG,q/CAAq/C,CAAC;AAC3gD,+BAAe,YAAY;;MCkFd,SAAS;;;;;;;;QAsIpB,qBAAgB,GAAgB,IAAI,CAAC;QAErC,qBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAYnF,mBAAc,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;QAElC,iBAAY,GAAG,yBAAyB,CAAC;QAwIzC,gBAAW,GAAG,CAAC,EAA4B;YACzC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;QAEF,qBAAgB,GAAG,CAAC,aAAgD;YAClE,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;SACpC,CAAC;QAYF,yBAAoB,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEvD,yBAAoB,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEvD,mBAAc,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,iBAAY,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEvC,sBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjD,gBAAW,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,KAAK,CAAC,gBAAgB,EAAE;gBAC1B,OAAO;aACR;YAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;YACxD,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACxD,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;aACxE;YAED,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBACpC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACjC,OAAO;aACR;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACrB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;aACxE;YAED,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;gBAC/E,OAAO;aACR;YAED,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;YACpB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;YACrF,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAClC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;aACtB;iBAAM;gBACL,MAAM,eAAe,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAC/C,MAAM,sBAAsB,GAC1B,eAAe,KAAK,IAAI,CAAC,kBAAkB;sBACvC,eAAe,CAAC,kBAAkB;sBAClC,eAAe,CAAC;gBACtB,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC;aAC/C;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC;YAEvE,qBAAqB,CAAC,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAE5B,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;SAC/E,CAAC;QAsDF,qBAAgB,GAAG,CAAC,EAAmB;YACrC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;SAC3B,CAAC;QAEF,kBAAa,GAAG,CAAC,KAAiB;YAChC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;YACxD,IAAI,CAAC,IAAI,EAAE,eAAe,IAAI,IAAI,IAAI,MAAM,EAAE;gBAC5C,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;aAC7E;SACF,CAAC;wBAvZkC,KAAK;;;2BAeF,KAAK;6BAOgC,EAAE;4BAQ5B,EAAE;6BAKX,KAAK;;;;uBAuBX,KAAK;wBAQJ,KAAK;qCAKQ,KAAK;;;6BA6BnB,EAAE;;+BAIV,EAAE;8BAOuB,IAAI,GAAG,EAAE;;IA/B7D,gBAAgB;;KAEf;IAyBD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IA8BD,iBAAiB;QACf,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO;SACR;QAED,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClB,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO;SACR;QAED,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAClC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;IA0BD,0BAA0B,CAAC,KAAiB;QAC1C,0BAA0B,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC9C;IAGD,4BAA4B,CAAC,KAAwB;QACnD,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC9B;IAGD,4BAA4B,CAAC,KAAkB;QAC7C,4BAA4B,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAChD;IAGD,yCAAyC,CAAC,KAAkB;QAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAGD,yCAAyC,CAAC,KAAkB;QAC1D,yCAAyC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;;;IAQD,iBAAiB;QACf,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,eAAe;QACb,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B;IAED,SAAS,MAAW;IAEpB,WAAW,MAAW;IAEtB,UAAU;QACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;QAC1F,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC1C;IAED,QAAQ;QACN,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;KACrF;IAED,UAAU;QACR,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,WAAW;QACT,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;SACzC;KACF;IAUD,YAAY;QACV,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAE7B,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QAED,wBAAwB,CAAC,IAAI,CAAC,CAAC;KAChC;IA+DD,UAAU;QACR,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;SACjC;KACF;;;;;;;IAUD,MAAM,gBAAgB;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;;;;;;IAQD,MAAM,QAAQ,CAAC,OAAqB;QAClC,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KACrC;;;;;;IAQD,WAAW;QACT,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;SACxB;QACD,OAAO,IAAI,CAAC;KACb;IAED,sBAAsB,CAAC,IAAY;QACjC,IAAI,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC;KACzC;IAED,qBAAqB,CAAC,aAA8B,EAAE,IAAY;QAChE,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC;KAChC;IAcD,uBAAuB,CAAC,KAAqC;QAC3D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,IAAI,EAAE,eAAe,IAAI,IAAI,EAAE;YAClC,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;SAC7E;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,KAAK,EAAE,IAAI,GACX,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/value-list/resources.ts","src/components/value-list/utils.ts","src/components/value-list/value-list.scss?tag=calcite-value-list&encapsulation=shadow","src/components/value-list/value-list.tsx"],"sourcesContent":["import { ValueUnion } from \"../types\";\n\nexport const CSS = {\n  container: \"container\",\n  handle: \"handle\",\n};\n\nexport const ICON_TYPES = {\n  grip: \"grip\",\n};\n\nexport type ICON_TYPES = ValueUnion<typeof ICON_TYPES>;\n\nexport const TEXT = {\n  filterResults: \"Filter results\",\n};\n","import { getItemIndex } from \"../pick-list/shared-list-logic\";\nimport { DragStatus } from \"./interfaces\";\nimport { ValueList } from \"./value-list\";\n\nexport function getScreenReaderText(\n  item: HTMLCalciteValueListItemElement,\n  status: DragStatus,\n  valueList: ValueList<HTMLCalciteValueListItemElement>,\n): string {\n  const { items, messages } = valueList;\n\n  const total = items.length;\n  const position = getItemIndex(valueList, item) + 1;\n  const template =\n    status === \"idle\"\n      ? messages.dragHandleIdle\n      : status === \"active\"\n        ? messages.dragHandleActive\n        : status === \"change\"\n          ? messages.dragHandleChange\n          : messages.dragHandleCommit;\n\n  return replacePlaceholders(template, item.label, position, total);\n}\n\nexport function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {\n  handle: HTMLCalciteHandleElement;\n  item: HTMLCalciteValueListItemElement;\n} {\n  const handle = event\n    .composedPath()\n    .find((item: HTMLElement) => item.dataset?.jsHandle !== undefined) as HTMLCalciteHandleElement;\n\n  const item = event\n    .composedPath()\n    .find(\n      (item: HTMLElement) => item.tagName?.toLowerCase() === \"calcite-value-list-item\",\n    ) as HTMLCalciteValueListItemElement;\n\n  return { handle, item };\n}\n\nexport function replacePlaceholders(text: string, label: string, position: number, total: number): string {\n  const replacePosition = text.replace(\"{position}\", position.toString());\n  const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n  return replaceLabel.replace(\"{total}\", total.toString());\n}\n",":host {\n  @apply text-color-2\n    text-n1\n    relative\n    box-border\n    flex\n    flex-shrink-0\n    flex-grow-0\n    flex-col\n    items-stretch\n    bg-transparent;\n  * {\n    @apply box-border;\n  }\n}\n\n@include disabled();\n\ncalcite-value-list-item:last-of-type {\n  @apply shadow-none;\n}\n\n:host([filter-enabled]) header {\n  @apply bg-foreground-1\n    mb-1\n    flex\n    items-center\n    justify-end;\n  &.sticky-pos {\n    @apply sticky top-0 z-sticky;\n  }\n  @apply shadow-border-bottom;\n}\n\ncalcite-filter {\n  @apply mb-px;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  calciteInternalListItemValueChangeHandler,\n  calciteListFocusOutHandler,\n  calciteListItemChangeHandler,\n  cleanUpObserver,\n  deselectRemovedItems,\n  deselectSiblingItems,\n  getItemData,\n  handleFilter,\n  handleFilterEvent,\n  handleInitialFilter,\n  initialize,\n  initializeObserver,\n  ItemData,\n  keyDownHandler,\n  ListFocusId,\n  moveItemIndex,\n  mutationObserverCallback,\n  removeItem,\n  selectSiblings,\n  setFocus,\n  setUpItems,\n} from \"../pick-list/shared-list-logic\";\nimport List from \"../pick-list/shared-list-render\";\nimport { ListItemAndHandle } from \"../value-list-item/interfaces\";\nimport {\n  DragDetail,\n  connectSortableComponent,\n  disconnectSortableComponent,\n  SortableComponent,\n  dragActive,\n} from \"../../utils/sortableComponent\";\nimport { focusElement } from \"../../utils/dom\";\nimport { ValueListMessages } from \"./assets/value-list/t9n\";\nimport { CSS, ICON_TYPES } from \"./resources\";\nimport { getHandleAndItemElement, getScreenReaderText } from \"./utils\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.\n * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.\n */\n@Component({\n  tag: \"calcite-value-list\",\n  styleUrl: \"value-list.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ValueList<\n    ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement,\n  >\n  implements\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent,\n    SortableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When provided, the method will be called to determine whether the element can move from the list.\n   */\n  @Prop() canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * When provided, the method will be called to determine whether the element can be added from another list.\n   */\n  @Prop() canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * When `true`, `calcite-value-list-item`s are sortable via a draggable button.\n   */\n  @Prop({ reflect: true }) dragEnabled = false;\n\n  /**\n   * The currently filtered items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];\n\n  /**\n   * The currently filtered data.\n   *\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ mutable: true }) filteredData: ItemData = [];\n\n  /**\n   * When `true`, an input appears at the top of the component that can be used by end users to filter list items.\n   */\n  @Prop({ reflect: true }) filterEnabled = false;\n\n  /**\n   * Placeholder text for the filter's input field.\n   */\n  @Prop({ reflect: true }) filterPlaceholder: string;\n\n  /**\n   * Text for the filter input field.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ reflect: true, mutable: true }) filterText: string;\n\n  /**\n   * The component's group identifier.\n   *\n   * To drag elements from one list into another, both lists must have the same group value.\n   */\n  @Prop({ reflect: true }) group?: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Similar to standard radio buttons and checkboxes.\n   * When `true`, a user can select multiple `calcite-value-list-item`s at a time.\n   * When `false`, only a single `calcite-value-list-item` can be selected at a time,\n   * and a new selection will deselect previous selections.\n   */\n  @Prop({ reflect: true }) multiple = false;\n\n  /**\n   * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.\n   */\n  @Prop({ reflect: true }) selectionFollowsFocus = 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<ValueListMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ValueListMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListElement;\n\n  @State() dataForFilter: ItemData = [];\n\n  @State() defaultMessages: ValueListMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() selectedValues: Map<string, ItemElement> = new Map();\n\n  items: ItemElement[];\n\n  lastSelectedItem: ItemElement = null;\n\n  mutationObserver = createObserver(\"mutation\", mutationObserverCallback.bind(this));\n\n  sortable: Sortable;\n\n  emitCalciteListChange: () => void;\n\n  emitCalciteListFilter: () => void;\n\n  filterEl: HTMLCalciteFilterElement;\n\n  assistiveTextEl: HTMLSpanElement;\n\n  handleSelector = `.${CSS.handle}`;\n\n  dragSelector = \"calcite-value-list-item\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    initialize.call(this);\n    initializeObserver.call(this);\n    this.setUpSorting();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    handleInitialFilter.call(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    disconnectInteractive(this);\n    disconnectSortableComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    cleanUpObserver.call(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when any of the list item selections have changed.\n   */\n  @Event({ cancelable: false }) calciteListChange: EventEmitter<\n    Map<string, HTMLCalciteValueListItemElement>\n  >;\n\n  /**\n   * Emits when the order of the list has changed.\n   */\n  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<any[]>;\n\n  /**\n   * Emits when a filter has changed.\n   */\n  @Event({ cancelable: false }) calciteListFilter: EventEmitter<void>;\n\n  @Listen(\"focusout\")\n  calciteListFocusOutHandler(event: FocusEvent): void {\n    calciteListFocusOutHandler.call(this, event);\n  }\n\n  @Listen(\"calciteListItemRemove\")\n  calciteListItemRemoveHandler(event: CustomEvent<void>): void {\n    removeItem.call(this, event);\n  }\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    calciteListItemChangeHandler.call(this, event);\n  }\n\n  @Listen(\"calciteInternalListItemPropsChange\")\n  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void {\n    event.stopPropagation();\n    this.setUpFilter();\n  }\n\n  @Listen(\"calciteInternalListItemValueChange\")\n  calciteInternalListItemValueChangeHandler(event: CustomEvent): void {\n    calciteInternalListItemValueChangeHandler.call(this, event);\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onGlobalDragStart(): void {\n    cleanUpObserver.call(this);\n  }\n\n  onGlobalDragEnd(): void {\n    initializeObserver.call(this);\n  }\n\n  onDragEnd(): void {}\n\n  onDragStart(): void {}\n\n  onDragSort(): void {\n    this.items = Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n    const values = this.items.map((item) => item.value);\n    this.calciteListOrderChange.emit(values);\n  }\n\n  getItems(): ItemElement[] {\n    return Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n  }\n\n  setUpItems(): void {\n    setUpItems.call(this, \"calcite-value-list-item\");\n    this.setUpSorting();\n  }\n\n  setUpFilter(): void {\n    if (this.filterEnabled) {\n      this.dataForFilter = this.getItemData();\n    }\n  }\n\n  setFilterEl = (el: HTMLCalciteFilterElement): void => {\n    this.filterEl = el;\n  };\n\n  setFilteredItems = (filteredItems: HTMLCalciteValueListItemElement[]): void => {\n    this.filteredItems = filteredItems;\n  };\n\n  setUpSorting(): void {\n    const { dragEnabled } = this;\n\n    if (!dragEnabled) {\n      return;\n    }\n\n    connectSortableComponent(this);\n  }\n\n  deselectRemovedItems = deselectRemovedItems.bind(this);\n\n  deselectSiblingItems = deselectSiblingItems.bind(this);\n\n  selectSiblings = selectSiblings.bind(this);\n\n  handleFilter = handleFilter.bind(this);\n\n  handleFilterEvent = handleFilterEvent.bind(this);\n\n  getItemData = getItemData.bind(this);\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const { handle, item } = getHandleAndItemElement(event);\n    if (handle && !item.handleActivated && event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"commit\", this));\n    }\n\n    if (!handle || !item.handleActivated) {\n      keyDownHandler.call(this, event);\n      return;\n    }\n\n    event.preventDefault();\n\n    const { items } = this;\n\n    if (event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"active\", this));\n    }\n\n    if ((event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") || items.length <= 1) {\n      return;\n    }\n\n    const { el } = this;\n    const nextIndex = moveItemIndex(this, item, event.key === \"ArrowUp\" ? \"up\" : \"down\");\n    if (nextIndex === items.length - 1) {\n      el.appendChild(item);\n    } else {\n      const itemAtNextIndex = el.children[nextIndex];\n      const insertionReferenceItem =\n        itemAtNextIndex === item.nextElementSibling\n          ? itemAtNextIndex.nextElementSibling\n          : itemAtNextIndex;\n      el.insertBefore(item, insertionReferenceItem);\n    }\n\n    this.items = this.getItems();\n    this.calciteListOrderChange.emit(this.items.map(({ value }) => value));\n\n    requestAnimationFrame(() => focusElement(handle));\n    item.handleActivated = true;\n\n    this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"change\", this));\n  };\n\n  handleBlur(): void {\n    if (this.dragEnabled) {\n      this.updateScreenReaderText(\"\");\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Returns the component's selected items. */\n  @Method()\n  async getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   *\n   * @param focusId\n   */\n  @Method()\n  async setFocus(focusId?: ListFocusId): Promise<void> {\n    await componentFocusable(this);\n\n    return setFocus.call(this, focusId);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getIconType(): typeof ICON_TYPES | null {\n    let type = null;\n    if (this.dragEnabled) {\n      type = ICON_TYPES.grip;\n    }\n    return type;\n  }\n\n  updateScreenReaderText(text: string): void {\n    this.assistiveTextEl.textContent = text;\n  }\n\n  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void {\n    handleElement.ariaLabel = text;\n  }\n\n  storeAssistiveEl = (el: HTMLSpanElement): void => {\n    this.assistiveTextEl = el;\n  };\n\n  handleFocusIn = (event: FocusEvent): void => {\n    const { handle, item } = getHandleAndItemElement(event);\n    if (!item?.handleActivated && item && handle) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n  };\n\n  @Listen(\"calciteValueListItemDragHandleBlur\")\n  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {\n    const { item, handle } = event.detail;\n    if (!item?.handleActivated && item) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n    event.stopPropagation();\n  }\n\n  render(): VNode {\n    return (\n      <List\n        onBlur={this.handleBlur}\n        onFocusin={this.handleFocusIn}\n        onKeyDown={this.keyDownHandler}\n        props={this}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/checkbox.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.8.0-next.1
+ * v2.8.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';
@@ -12,7 +12,7 @@ import { i as isActivationKey } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 
-const checkboxCss = ":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]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input);color:var(--calcite-color-background)}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{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          )}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{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          )}.toggle::after{content:\"\";inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute;transform:translateX(-50%) translateY(-50%)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const checkboxCss = ":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]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg,:host .toggle{inline-size:var(--calcite-checkbox-size);block-size:var(--calcite-checkbox-size)}:host .check-svg{pointer-events:none;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-color-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input);color:var(--calcite-color-background)}:host([status=invalid]:not([checked])) .check-svg{box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger)}:host([status=invalid]:not([checked])) .toggle:focus{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          )}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}.toggle{position:relative;outline-color:transparent}.toggle:active,.toggle:focus,.toggle:focus-visible{outline:2px solid var(--calcite-ui-focus-color, 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          )}.toggle::after{content:\"\";inset-block-start:50%;inset-inline-start:50%;min-block-size:1.5rem;min-inline-size:1.5rem;position:absolute;transform:translateX(-50%) translateY(-50%)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteCheckboxStyle0 = checkboxCss;
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {

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.8.0-next.1
+ * v2.8.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
@@ -39,7 +39,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-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:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform 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 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));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:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform 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));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 CalciteChipStyle0 = chipCss;
 
 const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {

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 { 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  connectInteractive,\n  disconnectInteractive,\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 { 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: 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  // --------------------------------------------------------------------------\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    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  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 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  //--------------------------------------------------------------------------\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 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":"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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 { 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  connectInteractive,\n  disconnectInteractive,\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 { 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: 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  // --------------------------------------------------------------------------\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    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  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 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  //--------------------------------------------------------------------------\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 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/main/LICENSE.md for details.
- * v2.8.0-next.1
+ * v2.8.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { C as Color } from './index2.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.8.0-next.1
+ * v2.8.0-next.2
  */
 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.8.0-next.1
+ * v2.8.0-next.2
  */
 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-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 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));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 CalciteComboboxItemStyle0 = comboboxItemCss;
 
 const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends HTMLElement {