@esri/calcite-components 2.6.0-next.1 → 2.6.0-next.3

package/dist/components/calcite-tile-select.js.map

@@ -1 +1 @@
-{"file":"calcite-tile-select.js","mappings":"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","names":[],"sources":["src/components/tile-select/resources.ts","src/components/tile-select/tile-select.scss?tag=calcite-tile-select&encapsulation=shadow","src/components/tile-select/tile-select.tsx"],"sourcesContent":["export const CSS = {\n  checked: \"checked\",\n  description: \"description\",\n  descriptionOnly: \"description-only\",\n  disabled: \"disabled\",\n  heading: \"heading\",\n  headingOnly: \"heading-only\",\n  icon: \"icon\",\n  iconOnly: \"icon-only\",\n  inputAlignmentEnd: \"input-alignment-end\",\n  inputAlignmentStart: \"input-alignment-start\",\n  inputEnabled: \"input-enabled\",\n  largeVisual: \"large-visual\",\n  tile: \"tile\",\n  tileContentContainer: \"tile-content-container\",\n  tileContent: \"tile-content\",\n  tileDescription: \"tile-description\",\n  tileHeading: \"tile-heading\",\n  tileLargeVisual: \"tile--large-visual\",\n  widthAuto: \"width-auto\",\n  widthFull: \"width-full\",\n};\n","$spacing: $baseline * 0.5;\n\n:host {\n  @apply block;\n\n  .container {\n    background-color: var(--calcite-color-foreground-1);\n    box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    block-size: 100%;\n    max-inline-size: 300px;\n    padding: $spacing;\n    position: relative;\n    vertical-align: top;\n    @apply transition-default;\n\n    &.checked {\n      @apply z-default;\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n\n    &.heading-only {\n      align-items: center;\n    }\n\n    &:not(.input-enabled) {\n      ::slotted(calcite-checkbox),\n      ::slotted(calcite-radio-button) {\n        @apply sr-only;\n      }\n    }\n\n    &.focused {\n      @apply focus-base;\n      &:not(.disabled) {\n        &:not(.input-enabled) {\n          @apply focus-inset;\n          outline-offset: -4px;\n          box-shadow:\n            0 0 0 1px var(--calcite-color-brand),\n            inset 0 0 0 2px var(--calcite-color-foreground-1);\n        }\n      }\n    }\n\n    &.input-enabled {\n      &.input-alignment-start {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only,\n          &.description-only,\n          &.heading.description,\n          &.icon.description,\n          &.heading.icon.description {\n            display: inline-grid;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only,\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          gap: $spacing;\n        }\n        .tile {\n          @apply order-1;\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-start: $spacing;\n          }\n        }\n      }\n      &.input-alignment-end {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only {\n            display: inline-grid;\n            grid-gap: $spacing;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only {\n          gap: $spacing;\n        }\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n      }\n    }\n\n    &.width-full {\n      @apply flex max-w-none;\n      .tile {\n        @apply flex-auto;\n      }\n    }\n  }\n}\n\n.tile {\n  @apply bg-foreground-1\n    box-border\n    duration-150\n    ease-in-out\n    flex\n    flex-col\n    gap-2\n    pointer-events-none\n    select-none\n    text-color-3;\n}\n\n.tile-content-container {\n  @apply flex\n    focus-base\n    items-stretch\n    p-0\n    text-color-2\n    w-full;\n}\n\n.tile-content {\n  @apply flex\n    flex-auto\n    flex-col\n    gap-2;\n  // set width handles slotted content and heading word wrap\n  inline-size: 10%;\n}\n\n.tile-heading {\n  @apply break-words\n    duration-150\n    ease-in-out\n    font-medium\n    pointer-events-none\n    text-color-2\n    text-n1-wrap;\n}\n\n.tile-description {\n  @apply break-words\n    duration-150\n    ease-in-out\n    pointer-events-none\n    text-color-3\n    text-n2-wrap;\n}\n\n.tile--large-visual {\n  @apply grid justify-center\n    text-center;\n  min-block-size: theme(\"spacing.48\");\n  .icon {\n    @apply self-end;\n  }\n  calcite-icon {\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .tile-content-container {\n    @apply self-center;\n  }\n}\n\n:host(:hover) {\n  .container {\n    &:not(.input-enabled) {\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n  }\n}\n\n:host(:hover),\n.checked {\n  .tile-heading {\n    @apply text-color-1;\n  }\n  .tile-description {\n    @apply text-color-2;\n  }\n}\n\n@include disabled();\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 { 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 { Alignment, Width } from \"../interfaces\";\nimport { TileSelectType } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-tile-select\",\n  styleUrl: \"tile-select.scss\",\n  shadow: true,\n})\nexport class TileSelect implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    this.input.checked = newChecked;\n  }\n\n  /** A description for the component, which displays below the heading. */\n  @Prop({ reflect: true }) description: string;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\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 name of the component on form submission. */\n  @Prop({ reflect: true }) name;\n\n  @Watch(\"name\")\n  nameChanged(newName: string): void {\n    this.input.name = newName;\n  }\n\n  /** When `true`, displays an interactive input based on the `type` property. */\n  @Prop({ reflect: true }) inputEnabled = false;\n\n  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */\n  @Prop({ reflect: true }) inputAlignment: Extract<\"end\" | \"start\", Alignment> = \"start\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"radio\"` is for single selection, and\n   *\n   * `\"checkbox\"` is for multiple selections.\n   */\n  @Prop({ reflect: true }) type: TileSelectType = \"radio\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Extract<\"auto\" | \"full\", Width> = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectElement;\n\n  private input: HTMLCalciteCheckboxElement | HTMLCalciteRadioButtonElement;\n\n  guid = `calcite-tile-select-${guid()}`;\n\n  //--------------------------------------------------------------------------\n  //\n  //  State\n  //\n  //--------------------------------------------------------------------------\n\n  /** The focused state of the tile-select. */\n  @State() focused = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits a custom change event.\n   *\n   * For checkboxes it emits when checked or unchecked.\n   *\n   * For radios it only emits when checked.\n   */\n  @Event({ cancelable: false }) calciteTileSelectChange: EventEmitter<void>;\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    return this.input?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteCheckboxChange\")\n  checkboxChangeHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.checked = checkbox.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalCheckboxFocus\")\n  @Listen(\"calciteInternalCheckboxBlur\")\n  checkboxFocusBlurHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.focused = event.detail;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalRadioButtonCheckedChange\")\n  radioButtonCheckedChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalRadioButtonFocus\")\n  @Listen(\"calciteInternalRadioButtonBlur\")\n  radioButtonFocusBlurHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.focused = radioButton.focused;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  clickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    const targets = [\"calcite-tile\", \"calcite-tile-select\"];\n    if (targets.includes(target.localName)) {\n      this.input.click();\n    }\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = true;\n    }\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.renderInput();\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.input.parentNode.removeChild(this.input);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderInput(): void {\n    this.input =\n      this.type === \"radio\"\n        ? /* we need to call createElement(x) separately to ensure supporting components are properly bundled */\n          document.createElement(\"calcite-radio-button\")\n        : document.createElement(\"calcite-checkbox\");\n    this.input.checked = this.checked;\n    this.input.disabled = this.disabled;\n    this.input.hidden = this.el.hidden;\n    this.input.id = this.guid;\n    this.input.label = this.heading || this.name || \"\";\n\n    if (this.name) {\n      this.input.name = this.name;\n    }\n\n    if (this.value) {\n      this.input.value = this.value != null ? this.value.toString() : \"\";\n    }\n\n    this.el.insertAdjacentElement(\"beforeend\", this.input);\n  }\n\n  render(): VNode {\n    const {\n      checked,\n      description,\n      disabled,\n      focused,\n      heading,\n      icon,\n      inputAlignment,\n      inputEnabled,\n      width,\n      iconFlipRtl,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const renderIcon = Boolean(icon);\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div\n          class={{\n            checked,\n            container: true,\n            [CSS.description]: Boolean(description),\n            [CSS.descriptionOnly]: Boolean(!heading && !icon && description),\n            disabled,\n            focused,\n            [CSS.heading]: Boolean(heading),\n            [CSS.headingOnly]: heading && !icon && !description,\n            [CSS.icon]: renderIcon,\n            [CSS.iconOnly]: !heading && icon && !description,\n            [CSS.inputAlignmentEnd]: inputAlignment === \"end\",\n            [CSS.inputAlignmentStart]: inputAlignment === \"start\",\n            [CSS.inputEnabled]: inputEnabled,\n            [CSS.largeVisual]: isLargeVisual,\n            [CSS.widthAuto]: width === \"auto\",\n            [CSS.widthFull]: width === \"full\",\n          }}\n        >\n          <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>\n            {icon && (\n              <div class={{ [CSS.icon]: renderIcon }}>\n                <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />\n              </div>\n            )}\n            <div class={CSS.tileContentContainer}>\n              <div class={CSS.tileContent}>\n                {heading && <div class={CSS.tileHeading}>{heading}</div>}\n                {description && <div class={CSS.tileDescription}>{description}</div>}\n              </div>\n            </div>\n          </div>\n          <slot />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile-select.js","mappings":"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","names":[],"sources":["src/components/tile-select/resources.ts","src/components/tile-select/tile-select.scss?tag=calcite-tile-select&encapsulation=shadow","src/components/tile-select/tile-select.tsx"],"sourcesContent":["export const CSS = {\n  checked: \"checked\",\n  description: \"description\",\n  descriptionOnly: \"description-only\",\n  disabled: \"disabled\",\n  heading: \"heading\",\n  headingOnly: \"heading-only\",\n  icon: \"icon\",\n  iconOnly: \"icon-only\",\n  inputAlignmentEnd: \"input-alignment-end\",\n  inputAlignmentStart: \"input-alignment-start\",\n  inputEnabled: \"input-enabled\",\n  largeVisual: \"large-visual\",\n  tile: \"tile\",\n  tileContentContainer: \"tile-content-container\",\n  tileContent: \"tile-content\",\n  tileDescription: \"tile-description\",\n  tileHeading: \"tile-heading\",\n  tileLargeVisual: \"tile--large-visual\",\n  widthAuto: \"width-auto\",\n  widthFull: \"width-full\",\n};\n","$spacing: $baseline * 0.5;\n\n:host {\n  @apply block;\n\n  .container {\n    background-color: var(--calcite-color-foreground-1);\n    box-shadow: 0 0 0 1px var(--calcite-color-border-2);\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-block;\n    block-size: 100%;\n    max-inline-size: 300px;\n    padding: $spacing;\n    position: relative;\n    vertical-align: top;\n    @apply transition-default;\n\n    &.checked {\n      @apply z-default;\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n\n    &.heading-only {\n      align-items: center;\n    }\n\n    &:not(.input-enabled) {\n      ::slotted(calcite-checkbox),\n      ::slotted(calcite-radio-button) {\n        @apply sr-only;\n      }\n    }\n\n    &.focused {\n      @apply focus-base;\n      &:not(.disabled) {\n        &:not(.input-enabled) {\n          @apply focus-inset;\n          outline-offset: -4px;\n          box-shadow:\n            0 0 0 1px var(--calcite-color-brand),\n            inset 0 0 0 2px var(--calcite-color-foreground-1);\n        }\n      }\n    }\n\n    &.input-enabled {\n      &.input-alignment-start {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only,\n          &.description-only,\n          &.heading.description,\n          &.icon.description,\n          &.heading.icon.description {\n            display: inline-grid;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only,\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          gap: $spacing;\n        }\n        .tile {\n          @apply order-1;\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-start: $spacing;\n          }\n        }\n      }\n      &.input-alignment-end {\n        &.width-auto {\n          &.heading-only,\n          &.icon-only {\n            display: inline-grid;\n            grid-gap: $spacing;\n            grid-template-columns: max-content 1fr;\n          }\n        }\n        &.heading-only,\n        &.icon-only {\n          gap: $spacing;\n        }\n        &.description-only,\n        &.heading.description,\n        &.icon.description,\n        &.heading.icon.description {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n        &.large-visual {\n          ::slotted(calcite-checkbox),\n          ::slotted(calcite-radio-button) {\n            position: absolute;\n            inset-block-start: $spacing;\n            inset-inline-end: $spacing;\n          }\n        }\n      }\n    }\n\n    &.width-full {\n      @apply flex max-w-none;\n      .tile {\n        @apply flex-auto;\n      }\n    }\n  }\n}\n\n.tile {\n  @apply bg-foreground-1\n    box-border\n    duration-150\n    ease-in-out\n    flex\n    flex-col\n    gap-2\n    pointer-events-none\n    select-none\n    text-color-3;\n}\n\n.tile-content-container {\n  @apply flex\n    focus-base\n    items-stretch\n    p-0\n    text-color-2\n    w-full;\n}\n\n.tile-content {\n  @apply flex\n    flex-auto\n    flex-col\n    gap-2;\n  // set width handles slotted content and heading word wrap\n  inline-size: 10%;\n}\n\n.tile-heading {\n  @apply break-words\n    duration-150\n    ease-in-out\n    font-medium\n    pointer-events-none\n    text-color-2\n    text-n1-wrap;\n}\n\n.tile-description {\n  @apply break-words\n    duration-150\n    ease-in-out\n    pointer-events-none\n    text-color-3\n    text-n2-wrap;\n}\n\n.tile--large-visual {\n  @apply grid justify-center\n    text-center;\n  min-block-size: theme(\"spacing.48\");\n  .icon {\n    @apply self-end;\n  }\n  calcite-icon {\n    block-size: 64px;\n    inline-size: 64px;\n  }\n  .tile-content-container {\n    @apply self-center;\n  }\n}\n\n:host(:hover) {\n  .container {\n    &:not(.input-enabled) {\n      box-shadow: 0 0 0 1px var(--calcite-color-brand);\n    }\n  }\n}\n\n:host(:hover),\n.checked {\n  .tile-heading {\n    @apply text-color-1;\n  }\n  .tile-description {\n    @apply text-color-2;\n  }\n}\n\n@include disabled();\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 { 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 { Alignment, Width } from \"../interfaces\";\nimport { TileSelectType } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-tile-select\",\n  styleUrl: \"tile-select.scss\",\n  shadow: true,\n})\nexport class TileSelect implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    this.input.checked = newChecked;\n  }\n\n  /** A description for the component, which displays below the heading. */\n  @Prop({ reflect: true }) description: string;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\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 name of the component on form submission. */\n  @Prop({ reflect: true }) name;\n\n  @Watch(\"name\")\n  nameChanged(newName: string): void {\n    this.input.name = newName;\n  }\n\n  /** When `true`, displays an interactive input based on the `type` property. */\n  @Prop({ reflect: true }) inputEnabled = false;\n\n  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */\n  @Prop({ reflect: true }) inputAlignment: Extract<\"end\" | \"start\", Alignment> = \"start\";\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"radio\"` is for single selection, and\n   *\n   * `\"checkbox\"` is for multiple selections.\n   */\n  @Prop({ reflect: true }) type: TileSelectType = \"radio\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Extract<\"auto\" | \"full\", Width> = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileSelectElement;\n\n  private input: HTMLCalciteCheckboxElement | HTMLCalciteRadioButtonElement;\n\n  guid = `calcite-tile-select-${guid()}`;\n\n  //--------------------------------------------------------------------------\n  //\n  //  State\n  //\n  //--------------------------------------------------------------------------\n\n  /** The focused state of the tile-select. */\n  @State() focused = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits a custom change event.\n   *\n   * For checkboxes it emits when checked or unchecked.\n   *\n   * For radios it only emits when checked.\n   */\n  @Event({ cancelable: false }) calciteTileSelectChange: EventEmitter<void>;\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    return this.input?.setFocus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteCheckboxChange\")\n  checkboxChangeHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.checked = checkbox.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalCheckboxFocus\")\n  @Listen(\"calciteInternalCheckboxBlur\")\n  checkboxFocusBlurHandler(event: CustomEvent): void {\n    const checkbox = event.target as HTMLCalciteCheckboxElement;\n    if (checkbox === this.input) {\n      this.focused = event.detail;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n    this.calciteTileSelectChange.emit();\n  }\n\n  @Listen(\"calciteInternalRadioButtonCheckedChange\")\n  radioButtonCheckedChangeHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.checked = radioButton.checked;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalRadioButtonFocus\")\n  @Listen(\"calciteInternalRadioButtonBlur\")\n  radioButtonFocusBlurHandler(event: CustomEvent): void {\n    const radioButton = event.target as HTMLCalciteRadioButtonElement;\n    if (radioButton === this.input) {\n      this.focused = radioButton.focused;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  clickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = event.target as HTMLElement;\n    const targets = [\"calcite-tile\", \"calcite-tile-select\"];\n    if (targets.includes(target.localName)) {\n      this.input.click();\n    }\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = true;\n    }\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const { localName } = this.input;\n\n    if (localName === \"calcite-radio-button\" || localName === \"calcite-checkbox\") {\n      (this.input as HTMLCalciteRadioButtonElement | HTMLCalciteCheckboxElement).hovered = false;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.renderInput();\n    connectInteractive(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.input.parentNode.removeChild(this.input);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private renderInput(): void {\n    this.input =\n      this.type === \"radio\"\n        ? /* we need to call createElement(x) separately to ensure supporting components are properly bundled */\n          document.createElement(\"calcite-radio-button\")\n        : document.createElement(\"calcite-checkbox\");\n    this.input.checked = this.checked;\n    this.input.disabled = this.disabled;\n    this.input.hidden = this.el.hidden;\n    this.input.id = this.guid;\n    this.input.label = this.heading || this.name || \"\";\n\n    if (this.name) {\n      this.input.name = this.name;\n    }\n\n    if (this.value) {\n      this.input.value = this.value != null ? this.value.toString() : \"\";\n    }\n\n    this.el.insertAdjacentElement(\"beforeend\", this.input);\n  }\n\n  render(): VNode {\n    const {\n      checked,\n      description,\n      disabled,\n      focused,\n      heading,\n      icon,\n      inputAlignment,\n      inputEnabled,\n      width,\n      iconFlipRtl,\n    } = this;\n    const isLargeVisual = heading && icon && !description;\n    const renderIcon = Boolean(icon);\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div\n          class={{\n            checked,\n            container: true,\n            [CSS.description]: Boolean(description),\n            [CSS.descriptionOnly]: Boolean(!heading && !icon && description),\n            disabled,\n            focused,\n            [CSS.heading]: Boolean(heading),\n            [CSS.headingOnly]: heading && !icon && !description,\n            [CSS.icon]: renderIcon,\n            [CSS.iconOnly]: !heading && icon && !description,\n            [CSS.inputAlignmentEnd]: inputAlignment === \"end\",\n            [CSS.inputAlignmentStart]: inputAlignment === \"start\",\n            [CSS.inputEnabled]: inputEnabled,\n            [CSS.largeVisual]: isLargeVisual,\n            [CSS.widthAuto]: width === \"auto\",\n            [CSS.widthFull]: width === \"full\",\n          }}\n        >\n          <div class={{ [CSS.tile]: true, [CSS.tileLargeVisual]: isLargeVisual }}>\n            {icon && (\n              <div class={{ [CSS.icon]: renderIcon }}>\n                <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />\n              </div>\n            )}\n            <div class={CSS.tileContentContainer}>\n              <div class={CSS.tileContent}>\n                {heading && <div class={CSS.tileHeading}>{heading}</div>}\n                {description && <div class={CSS.tileDescription}>{description}</div>}\n              </div>\n            </div>\n          </div>\n          <slot />\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-tile.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.6.0-next.1
+ * v2.6.0-next.3
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';

package/dist/components/calcite-tile.js.map

@@ -1 +1 @@
-{"file":"calcite-tile.js","mappings":";;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,mBAAmB;IACrC,oBAAoB,EAAE,wBAAwB;IAC9C,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,cAAc;CAC5B,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;CAC1B;;ACbD,MAAM,OAAO,GAAG,k1HAAk1H;;MCqBr1H,IAAI;;;;;;;;;;QA6EP,iCAA4B,GAAG,CAAC,KAAY;YAClD,IAAI,CAAC,eAAe,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC5D,CAAC;QAEM,+BAA0B,GAAG,CAAC,KAAY;YAChD,IAAI,CAAC,aAAa,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC1D,CAAC;sBAzEgC,KAAK;yBAKyB,OAAO;;wBAUnC,KAAK;qBAOR,KAAK;uBAOH,KAAK;;;;2BAaD,KAAK;qBAKJ,GAAG;+BAUhB,KAAK;6BAEP,KAAK;;;;;;;IAsB9B,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,UAAU;QACR,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QACzF,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QAEtD,QACE,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,WAAW,GAAG,aAAa,EAAE,IACpE,IAAI,IAAI,oBAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,EACrE,WAAK,KAAK,EAAE,GAAG,CAAC,gBAAgB,IAC9B,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,GAAG,eAAe,EAAE,IACzD,YAAM,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,4BAA4B,GAAI,CAC/E,EACN,WAAK,KAAK,EAAE,GAAG,CAAC,OAAO,IACpB,OAAO,IAAI,WAAK,KAAK,EAAE,GAAG,CAAC,OAAO,IAAG,OAAO,CAAO,EACnD,WAAW,IAAI,WAAK,KAAK,EAAE,GAAG,CAAC,WAAW,IAAG,WAAW,CAAO,CAC5D,EACN,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,GAAG,aAAa,EAAE,IACvD,YAAM,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,0BAA0B,GAAI,CAC3E,CACF,CACF,EACN;KACH;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,QACE,EAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IACrC,IAAI,CAAC,IAAI,IACR,oBAAc,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC9C,IAAI,CAAC,UAAU,EAAE,CACL,KAEf,IAAI,CAAC,UAAU,EAAE,CAClB,CACoB,EACvB;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  content: \"content\",\n  contentContainer: \"content-container\",\n  contentSlotContainer: \"content-slot-container\",\n  description: \"description\",\n  heading: \"heading\",\n  largeVisual: \"large-visual\",\n};\n\nexport const SLOTS = {\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tile-background-color: Specifies the background color of the component.\n * @prop --calcite-tile-border-color: Specifies the border color of the component.\n * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.\n * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.\n */\n\n:host {\n  --calcite-tile-background-color: var(--calcite-color-foreground-1);\n  --calcite-tile-border-color: var(--calcite-color-border-2);\n  --calcite-tile-description-text-color: var(--calcite-color-text-3);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-2);\n\n  box-sizing: border-box;\n  display: inline-block;\n  max-inline-size: 460px;\n  min-inline-size: 140px;\n\n  .container {\n    background-color: var(--calcite-tile-background-color);\n    block-size: var(--calcite-container-size-content-fluid);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--calcite-spacing-md);\n    inline-size: var(--calcite-container-size-content-fluid);\n    pointer-events: none;\n    transition-duration: 150ms;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    user-select: none;\n  }\n\n  .content-container {\n    display: flex;\n    outline-color: transparent;\n    padding: 0;\n    inline-size: 100%;\n  }\n\n  .content-slot-container {\n    align-items: center;\n    display: flex;\n\n    &:first-child {\n      padding-inline: 0 0.75rem;\n    }\n\n    &:last-child {\n      padding-inline: 0.75rem 0;\n    }\n  }\n\n  .heading {\n    color: var(--calcite-tile-heading-text-color);\n    font-size: var(--calcite-font-size--1);\n    font-weight: var(--calcite-font-weight-medium);\n    line-height: 1.20313rem;\n    overflow-wrap: break-word;\n  }\n  .large-visual {\n    align-items: center;\n    justify-content: center;\n    min-block-size: 12rem;\n    text-align: center;\n\n    calcite-icon {\n      block-size: 64px;\n      inline-size: 64px;\n    }\n    .content-container {\n      justify-content: center;\n    }\n  }\n  .description {\n    color: var(--calcite-tile-description-text-color);\n    font-size: var(--calcite-font-size--2);\n    font-weight: var(--calcite-font-weight-regular);\n    line-height: 1.03125rem;\n    overflow-wrap: break-word;\n  }\n}\n\n:host([alignment=\"center\"]) {\n  .container {\n    align-items: center;\n    text-align: center;\n  }\n}\n\n:host([scale=\"s\"]) {\n  max-inline-size: 400px;\n  min-inline-size: 100px;\n  .container {\n    gap: var(--calcite-spacing-sm);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--3);\n    line-height: 0.85938rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  max-inline-size: 520px;\n  min-inline-size: 160px;\n  .container {\n    gap: var(--calcite-spacing-xl);\n  }\n  .heading {\n    font-size: var(--calcite-font-size-0);\n    line-height: 1.375rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n}\n\n:host(:not([href])) {\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([href]),\n:host([href]:hover) {\n  --calcite-tile-heading-text-color: var(--calcite-color-text-link);\n  .heading {\n    text-decoration-line: underline;\n  }\n}\n:host(:not([embed])) {\n  .container {\n    box-shadow: 0 0 0 1px var(--calcite-tile-border-color);\n    padding: var(--calcite-spacing-md);\n  }\n}\n:host(:not([embed])[scale=\"s\"]) {\n  .container {\n    padding: var(--calcite-spacing-sm);\n  }\n}\n:host(:not([embed])[scale=\"l\"]) {\n  .container {\n    padding: var(--calcite-spacing-xl);\n  }\n}\n:host(:not([embed])[href]:hover),\n:host(:not([embed])[href]:focus) {\n  --calcite-tile-border-color: var(--calcite-color-brand);\n  .container {\n    box-shadow: 0 0 0 2px var(--calcite-tile-border-color);\n    cursor: pointer;\n    position: relative;\n    z-index: var(--calcite-z-index);\n  }\n}\n:host(:not([embed])[href]:active) {\n  --calcite-tile-border-color: var(--calcite-color-brand);\n  .container {\n    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);\n  }\n}\n\n@include disabled();\n\n:host(:hover),\n:host([active]) {\n  --calcite-tile-description-text-color: var(--calcite-color-text-2);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-1);\n}\n\n@include base-component();\n","import { Component, Element, h, Prop, State, VNode } from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CSS, SLOTS } from \"./resources\";\nimport { Alignment, Scale } from \"../interfaces\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\n\n/**\n * @slot content-start - A slot for adding non-actionable elements before the component's content.\n * @slot content-end - A slot for adding non-actionable elements after the component's content.\n */\n@Component({\n  tag: \"calcite-tile\",\n  styleUrl: \"tile.scss\",\n  shadow: true,\n})\nexport class Tile implements InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the alignment of the Tile's content.\n   */\n  @Prop({ reflect: true }) alignment: Exclude<Alignment, \"end\"> = \"start\";\n\n  /**\n   * A description for the component, which displays below the heading.\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   * The component's embed mode.\n   *\n   * When `true`, renders without a border and padding for use by other components.\n   */\n  @Prop({ reflect: true }) embed = false;\n\n  /**\n   * The focused state of the component.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) focused = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When embed is `\"false\"`, the URL for the component. */\n  @Prop({ reflect: true }) href: string;\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\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileElement;\n\n  @State() hasContentStart = false;\n\n  @State() hasContentEnd = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    this.hasContentStart = slotChangeHasAssignedElement(event);\n  };\n\n  private handleContentEndSlotChange = (event: Event): void => {\n    this.hasContentEnd = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTile(): VNode {\n    const { icon, hasContentStart, hasContentEnd, heading, description, iconFlipRtl } = this;\n    const isLargeVisual = heading && icon && !description;\n\n    return (\n      <div class={{ [CSS.container]: true, [CSS.largeVisual]: isLargeVisual }}>\n        {icon && <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n        <div class={CSS.contentContainer}>\n          <div class={{ [CSS.contentSlotContainer]: hasContentStart }}>\n            <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n          </div>\n          <div class={CSS.content}>\n            {heading && <div class={CSS.heading}>{heading}</div>}\n            {description && <div class={CSS.description}>{description}</div>}\n          </div>\n          <div class={{ [CSS.contentSlotContainer]: hasContentEnd }}>\n            <slot name={SLOTS.contentEnd} onSlotchange={this.handleContentEndSlotChange} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tile.js","mappings":";;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,mBAAmB;IACrC,oBAAoB,EAAE,wBAAwB;IAC9C,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,cAAc;CAC5B,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;CAC1B;;ACbD,MAAM,OAAO,GAAG,k1HAAk1H;;MCqBr1H,IAAI;;;;;;;;;;QA+EP,iCAA4B,GAAG,CAAC,KAAY;YAClD,IAAI,CAAC,eAAe,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC5D,CAAC;QAEM,+BAA0B,GAAG,CAAC,KAAY;YAChD,IAAI,CAAC,aAAa,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;SAC1D,CAAC;sBA3EgC,KAAK;yBAKyB,OAAO;;wBAUnC,KAAK;qBASR,KAAK;uBAOH,KAAK;;;;2BAaD,KAAK;qBAKJ,GAAG;+BAUhB,KAAK;6BAEP,KAAK;;;;;;;IAsB9B,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,UAAU;QACR,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QACzF,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QAEtD,QACE,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,WAAW,GAAG,aAAa,EAAE,IACpE,IAAI,IAAI,oBAAc,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,EACrE,WAAK,KAAK,EAAE,GAAG,CAAC,gBAAgB,IAC9B,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,GAAG,eAAe,EAAE,IACzD,YAAM,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,4BAA4B,GAAI,CAC/E,EACN,WAAK,KAAK,EAAE,GAAG,CAAC,OAAO,IACpB,OAAO,IAAI,WAAK,KAAK,EAAE,GAAG,CAAC,OAAO,IAAG,OAAO,CAAO,EACnD,WAAW,IAAI,WAAK,KAAK,EAAE,GAAG,CAAC,WAAW,IAAG,WAAW,CAAO,CAC5D,EACN,WAAK,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,oBAAoB,GAAG,aAAa,EAAE,IACvD,YAAM,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,YAAY,EAAE,IAAI,CAAC,0BAA0B,GAAI,CAC3E,CACF,CACF,EACN;KACH;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,QACE,EAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IACrC,IAAI,CAAC,IAAI,IACR,oBAAc,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC9C,IAAI,CAAC,UAAU,EAAE,CACL,KAEf,IAAI,CAAC,UAAU,EAAE,CAClB,CACoB,EACvB;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tile/resources.ts","src/components/tile/tile.scss?tag=calcite-tile&encapsulation=shadow","src/components/tile/tile.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  content: \"content\",\n  contentContainer: \"content-container\",\n  contentSlotContainer: \"content-slot-container\",\n  description: \"description\",\n  heading: \"heading\",\n  largeVisual: \"large-visual\",\n};\n\nexport const SLOTS = {\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tile-background-color: Specifies the background color of the component.\n * @prop --calcite-tile-border-color: Specifies the border color of the component.\n * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.\n * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.\n */\n\n:host {\n  --calcite-tile-background-color: var(--calcite-color-foreground-1);\n  --calcite-tile-border-color: var(--calcite-color-border-2);\n  --calcite-tile-description-text-color: var(--calcite-color-text-3);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-2);\n\n  box-sizing: border-box;\n  display: inline-block;\n  max-inline-size: 460px;\n  min-inline-size: 140px;\n\n  .container {\n    background-color: var(--calcite-tile-background-color);\n    block-size: var(--calcite-container-size-content-fluid);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--calcite-spacing-md);\n    inline-size: var(--calcite-container-size-content-fluid);\n    pointer-events: none;\n    transition-duration: 150ms;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    user-select: none;\n  }\n\n  .content-container {\n    display: flex;\n    outline-color: transparent;\n    padding: 0;\n    inline-size: 100%;\n  }\n\n  .content-slot-container {\n    align-items: center;\n    display: flex;\n\n    &:first-child {\n      padding-inline: 0 0.75rem;\n    }\n\n    &:last-child {\n      padding-inline: 0.75rem 0;\n    }\n  }\n\n  .heading {\n    color: var(--calcite-tile-heading-text-color);\n    font-size: var(--calcite-font-size--1);\n    font-weight: var(--calcite-font-weight-medium);\n    line-height: 1.20313rem;\n    overflow-wrap: break-word;\n  }\n  .large-visual {\n    align-items: center;\n    justify-content: center;\n    min-block-size: 12rem;\n    text-align: center;\n\n    calcite-icon {\n      block-size: 64px;\n      inline-size: 64px;\n    }\n    .content-container {\n      justify-content: center;\n    }\n  }\n  .description {\n    color: var(--calcite-tile-description-text-color);\n    font-size: var(--calcite-font-size--2);\n    font-weight: var(--calcite-font-weight-regular);\n    line-height: 1.03125rem;\n    overflow-wrap: break-word;\n  }\n}\n\n:host([alignment=\"center\"]) {\n  .container {\n    align-items: center;\n    text-align: center;\n  }\n}\n\n:host([scale=\"s\"]) {\n  max-inline-size: 400px;\n  min-inline-size: 100px;\n  .container {\n    gap: var(--calcite-spacing-sm);\n  }\n  .heading {\n    font-size: var(--calcite-font-size--2);\n    line-height: 1.03125rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--3);\n    line-height: 0.85938rem;\n  }\n}\n\n:host([scale=\"l\"]) {\n  max-inline-size: 520px;\n  min-inline-size: 160px;\n  .container {\n    gap: var(--calcite-spacing-xl);\n  }\n  .heading {\n    font-size: var(--calcite-font-size-0);\n    line-height: 1.375rem;\n  }\n  .description {\n    font-size: var(--calcite-font-size--1);\n    line-height: 1.20313rem;\n  }\n}\n\n:host(:not([href])) {\n  --calcite-ui-icon-color: var(--calcite-color-text-3);\n}\n\n:host([href]),\n:host([href]:hover) {\n  --calcite-tile-heading-text-color: var(--calcite-color-text-link);\n  .heading {\n    text-decoration-line: underline;\n  }\n}\n:host(:not([embed])) {\n  .container {\n    box-shadow: 0 0 0 1px var(--calcite-tile-border-color);\n    padding: var(--calcite-spacing-md);\n  }\n}\n:host(:not([embed])[scale=\"s\"]) {\n  .container {\n    padding: var(--calcite-spacing-sm);\n  }\n}\n:host(:not([embed])[scale=\"l\"]) {\n  .container {\n    padding: var(--calcite-spacing-xl);\n  }\n}\n:host(:not([embed])[href]:hover),\n:host(:not([embed])[href]:focus) {\n  --calcite-tile-border-color: var(--calcite-color-brand);\n  .container {\n    box-shadow: 0 0 0 2px var(--calcite-tile-border-color);\n    cursor: pointer;\n    position: relative;\n    z-index: var(--calcite-z-index);\n  }\n}\n:host(:not([embed])[href]:active) {\n  --calcite-tile-border-color: var(--calcite-color-brand);\n  .container {\n    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);\n  }\n}\n\n@include disabled();\n\n:host(:hover),\n:host([active]) {\n  --calcite-tile-description-text-color: var(--calcite-color-text-2);\n  --calcite-tile-heading-text-color: var(--calcite-color-text-1);\n}\n\n@include base-component();\n","import { Component, Element, h, Prop, State, VNode } from \"@stencil/core\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { CSS, SLOTS } from \"./resources\";\nimport { Alignment, Scale } from \"../interfaces\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\n\n/**\n * @slot content-start - A slot for adding non-actionable elements before the component's content.\n * @slot content-end - A slot for adding non-actionable elements after the component's content.\n */\n@Component({\n  tag: \"calcite-tile\",\n  styleUrl: \"tile.scss\",\n  shadow: true,\n})\nexport class Tile implements InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is active.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the alignment of the Tile's content.\n   */\n  @Prop({ reflect: true }) alignment: Exclude<Alignment, \"end\"> = \"start\";\n\n  /**\n   * A description for the component, which displays below the heading.\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   * The component's embed mode.\n   *\n   * When `true`, renders without a border and padding for use by other components.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true }) embed = false;\n\n  /**\n   * The focused state of the component.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) focused = false;\n\n  /** The component header text, which displays between the icon and description. */\n  @Prop({ reflect: true }) heading: string;\n\n  /** When embed is `\"false\"`, the URL for the component. */\n  @Prop({ reflect: true }) href: string;\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\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTileElement;\n\n  @State() hasContentStart = false;\n\n  @State() hasContentEnd = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    this.hasContentStart = slotChangeHasAssignedElement(event);\n  };\n\n  private handleContentEndSlotChange = (event: Event): void => {\n    this.hasContentEnd = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTile(): VNode {\n    const { icon, hasContentStart, hasContentEnd, heading, description, iconFlipRtl } = this;\n    const isLargeVisual = heading && icon && !description;\n\n    return (\n      <div class={{ [CSS.container]: true, [CSS.largeVisual]: isLargeVisual }}>\n        {icon && <calcite-icon flipRtl={iconFlipRtl} icon={icon} scale=\"l\" />}\n        <div class={CSS.contentContainer}>\n          <div class={{ [CSS.contentSlotContainer]: hasContentStart }}>\n            <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n          </div>\n          <div class={CSS.content}>\n            {heading && <div class={CSS.heading}>{heading}</div>}\n            {description && <div class={CSS.description}>{description}</div>}\n          </div>\n          <div class={{ [CSS.contentSlotContainer]: hasContentEnd }}>\n            <slot name={SLOTS.contentEnd} onSlotchange={this.handleContentEndSlotChange} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        {this.href ? (\n          <calcite-link disabled={disabled} href={this.href}>\n            {this.renderTile()}\n          </calcite-link>\n        ) : (\n          this.renderTile()\n        )}\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-time-picker.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.6.0-next.1
+ * v2.6.0-next.3
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-group.js

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

package/dist/components/calcite-tip-manager.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.6.0-next.1
+ * v2.6.0-next.3
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir, t as toAriaBoolean } from './dom.js';
@@ -32,7 +32,7 @@ const ICONS = {
     close: "x",
 };
 
-const tipManagerCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);--calcite-tip-manager-height:19vh}:host *{box-sizing:border-box}:host([closed]){display:none}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline-end:0px;padding-inline-start:1rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-1);line-height:1.5rem;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.container{position:relative;overflow:hidden;outline-color:transparent;min-block-size:150px}.container: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          )}.tip-container{margin-block-start:1px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:1rem;outline-color:transparent;animation-name:none;animation-duration:var(--calcite-animation-timing);block-size:var(--calcite-tip-manager-height)}.tip-container: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          )}::slotted(calcite-tip){margin:0px;border-style:none;max-inline-size:var(--calcite-tip-max-width)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding-inline:0px;padding-block:0.75rem 0.5rem}.page-position{margin-block:0px;margin-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tipManagerCss = ":host{box-sizing:border-box;display:block;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);--calcite-tip-manager-height:19vh}:host *{box-sizing:border-box}:host([closed]){display:none}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline-end:0px;padding-inline-start:1rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-1);line-height:1.5rem;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.container{position:relative;overflow:hidden;outline-color:transparent;min-block-size:150px}.container: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          )}.tip-container{margin-block-start:1px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:1rem;outline-color:transparent;animation-name:none;animation-duration:var(--calcite-animation-timing);block-size:var(--calcite-tip-manager-height)}.tip-container: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          )}::slotted(calcite-tip){margin:0px;border-style:none;max-inline-size:var(--calcite-tip-max-width)}.tip-container--advancing{animation-name:tip-advance}.tip-container--retreating{animation-name:tip-retreat}.pagination{display:flex;align-items:center;justify-content:center;padding-inline:0px;padding-block:0.75rem 0.5rem}.page-position{margin-block:0px;margin-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}@keyframes tip-advance{0%{opacity:0;transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TipManager = /*@__PURE__*/ proxyCustomElement(class TipManager extends HTMLElement {
     constructor() {

package/dist/components/calcite-tip-manager.js.map

@@ -1 +1 @@
-{"file":"calcite-tip-manager.js","mappings":"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","names":[],"sources":["src/components/tip-manager/resources.ts","src/components/tip-manager/tip-manager.scss?tag=calcite-tip-manager&encapsulation=shadow","src/components/tip-manager/tip-manager.tsx"],"sourcesContent":["export const CSS = {\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  container: \"container\",\n  tipContainer: \"tip-container\",\n  tipContainerAdvancing: \"tip-container--advancing\",\n  tipContainerRetreating: \"tip-container--retreating\",\n  pagination: \"pagination\",\n  pagePosition: \"page-position\",\n  pageNext: \"page-next\",\n  pagePrevious: \"page-previous\",\n};\n\nexport const ICONS = {\n  chevronLeft: \"chevron-left\",\n  chevronRight: \"chevron-right\",\n  close: \"x\",\n};\n\nexport const TEXT = {\n  defaultGroupTitle: \"Tips\",\n  defaultPaginationLabel: \"Tip\",\n  close: \"Close\",\n  previous: \"Previous\",\n  next: \"Next\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tip-manager-height: The maximum height of the component.\n * @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.\n */\n\n:host {\n  @apply bg-foreground-1\n  text-color-2\n  text-n1h\n  box-border\n  block;\n\n  * {\n    @apply box-border;\n  }\n\n  --calcite-tip-manager-height: 19vh;\n}\n\n:host([closed]) {\n  @apply hidden;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply border-color-3\n    border-0\n    border-b\n    border-solid\n    py-0;\n\n  padding-inline-end: theme(\"padding.0\");\n  padding-inline-start: theme(\"padding.4\");\n\n  .heading {\n    @apply text-color-1\n      text-1h\n      p-0\n      font-bold;\n  }\n}\n\n.container {\n  @apply focus-base\n    relative\n    overflow-hidden;\n  min-block-size: 150px;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n.tip-container {\n  @apply focus-base\n    mt-px\n    flex\n    items-start\n    justify-center\n    overflow-auto\n    p-4;\n  animation-name: none;\n  animation-duration: var(--calcite-animation-timing);\n  block-size: var(--calcite-tip-manager-height);\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n::slotted(calcite-tip) {\n  @apply m-0 border-none;\n  max-inline-size: var(--calcite-tip-max-width);\n}\n\n.tip-container--advancing {\n  animation-name: tip-advance;\n}\n\n.tip-container--retreating {\n  animation-name: tip-retreat;\n}\n\n/* Pagination Styles*/\n.pagination {\n  @apply flex\n  items-center\n  justify-center\n  px-0\n  pt-3\n  pb-2;\n}\n\n.page-position {\n  @apply text-n2h my-0 mx-2;\n}\n\n/* @keyframes*/\n@keyframes tip-advance {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n@keyframes tip-retreat {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(-50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipManagerMessages } from \"./assets/tip-manager/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-tip`s.\n */\n@Component({\n  tag: \"calcite-tip-manager\",\n  styleUrl: \"tip-manager.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TipManager {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, does not display or position the component.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  @Watch(\"closed\")\n  closedChangeHandler(): void {\n    this.direction = null;\n  }\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\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: TipManagerMessages;\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<TipManagerMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipManagerElement;\n\n  @State() selectedIndex: number;\n\n  @Watch(\"selectedIndex\")\n  selectedChangeHandler(): void {\n    this.showSelectedTip();\n    this.updateGroupTitle();\n  }\n\n  @State() tips: HTMLCalciteTipElement[];\n\n  @State() total: number;\n\n  @State() direction: \"advancing\" | \"retreating\";\n\n  @State() groupTitle: string;\n\n  mutationObserver = createObserver(\"mutation\", () => this.setUpTips());\n\n  container: HTMLDivElement;\n\n  @State() defaultMessages: TipManagerMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  async effectiveLocaleChange(): Promise<void> {\n    await updateMessages(this, this.effectiveLocale);\n    this.updateGroupTitle();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.setUpTips();\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    this.updateGroupTitle();\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Selects the next `calcite-tip` to display. */\n  @Method()\n  async nextTip(): Promise<void> {\n    this.direction = \"advancing\";\n    const nextIndex = this.selectedIndex + 1;\n    this.selectedIndex = (nextIndex + this.total) % this.total;\n  }\n\n  /** Selects the previous `calcite-tip` to display. */\n  @Method()\n  async previousTip(): Promise<void> {\n    this.direction = \"retreating\";\n    const previousIndex = this.selectedIndex - 1;\n    this.selectedIndex = (previousIndex + this.total) % this.total;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipManagerClose: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setUpTips(): void {\n    const tips = Array.from(this.el.querySelectorAll(\"calcite-tip\"));\n    this.total = tips.length;\n    if (this.total === 0) {\n      return;\n    }\n    const selectedTip = this.el.querySelector<HTMLCalciteTipElement>(\"calcite-tip[selected]\");\n\n    this.tips = tips;\n    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;\n\n    tips.forEach((tip: HTMLCalciteTipElement) => {\n      tip.closeDisabled = true;\n    });\n    this.showSelectedTip();\n  }\n\n  hideTipManager = (): void => {\n    this.closed = true;\n    this.calciteTipManagerClose.emit();\n  };\n\n  showSelectedTip(): void {\n    this.tips.forEach((tip, index) => {\n      const isSelected = this.selectedIndex === index;\n      tip.selected = isSelected;\n      tip.hidden = !isSelected;\n    });\n  }\n\n  updateGroupTitle(): void {\n    if (this.tips) {\n      const selectedTip = this.tips[this.selectedIndex];\n      const tipParent = selectedTip.closest(\"calcite-tip-group\");\n      this.groupTitle = tipParent?.groupTitle || this.messages?.defaultGroupTitle;\n    }\n  }\n\n  previousClicked = (): void => {\n    this.previousTip();\n  };\n\n  nextClicked = (): void => {\n    this.nextTip();\n  };\n\n  tipManagerKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target !== this.container) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        this.nextTip();\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        this.previousTip();\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.selectedIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.selectedIndex = this.total - 1;\n        break;\n    }\n  };\n\n  storeContainerRef = (el: HTMLDivElement): void => {\n    this.container = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderPagination(): VNode {\n    const dir = getElementDir(this.el);\n    const { selectedIndex, tips, total, messages } = this;\n\n    const nextLabel = messages.next;\n    const previousLabel = messages.previous;\n    const paginationLabel = messages.defaultPaginationLabel;\n\n    return tips.length > 1 ? (\n      <footer class={CSS.pagination}>\n        <calcite-action\n          class={CSS.pagePrevious}\n          icon={dir === \"ltr\" ? ICONS.chevronLeft : ICONS.chevronRight}\n          onClick={this.previousClicked}\n          scale=\"m\"\n          text={previousLabel}\n        />\n        <span class={CSS.pagePosition}>{`${paginationLabel} ${selectedIndex + 1}/${total}`}</span>\n        <calcite-action\n          class={CSS.pageNext}\n          icon={dir === \"ltr\" ? ICONS.chevronRight : ICONS.chevronLeft}\n          onClick={this.nextClicked}\n          scale=\"m\"\n          text={nextLabel}\n        />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { closed, direction, headingLevel, groupTitle, selectedIndex, messages, total } = this;\n\n    const closeLabel = messages.close;\n\n    if (total === 0) {\n      return null;\n    }\n\n    return (\n      <section\n        aria-hidden={toAriaBoolean(closed)}\n        class={CSS.container}\n        hidden={closed}\n        onKeyDown={this.tipManagerKeyDownHandler}\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={this.storeContainerRef}\n      >\n        <header class={CSS.header}>\n          <Heading class={CSS.heading} level={headingLevel}>\n            {groupTitle}\n          </Heading>\n          <calcite-action\n            class={CSS.close}\n            onClick={this.hideTipManager}\n            scale=\"m\"\n            text={closeLabel}\n          >\n            <calcite-icon icon={ICONS.close} scale=\"m\" />\n          </calcite-action>\n        </header>\n        <div\n          class={{\n            [CSS.tipContainer]: true,\n            [CSS.tipContainerAdvancing]: !closed && direction === \"advancing\",\n            [CSS.tipContainerRetreating]: !closed && direction === \"retreating\",\n          }}\n          key={selectedIndex}\n          tabIndex={0}\n        >\n          <slot />\n        </div>\n        {this.renderPagination()}\n      </section>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tip-manager.js","mappings":"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","names":[],"sources":["src/components/tip-manager/resources.ts","src/components/tip-manager/tip-manager.scss?tag=calcite-tip-manager&encapsulation=shadow","src/components/tip-manager/tip-manager.tsx"],"sourcesContent":["export const CSS = {\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  container: \"container\",\n  tipContainer: \"tip-container\",\n  tipContainerAdvancing: \"tip-container--advancing\",\n  tipContainerRetreating: \"tip-container--retreating\",\n  pagination: \"pagination\",\n  pagePosition: \"page-position\",\n  pageNext: \"page-next\",\n  pagePrevious: \"page-previous\",\n};\n\nexport const ICONS = {\n  chevronLeft: \"chevron-left\",\n  chevronRight: \"chevron-right\",\n  close: \"x\",\n};\n\nexport const TEXT = {\n  defaultGroupTitle: \"Tips\",\n  defaultPaginationLabel: \"Tip\",\n  close: \"Close\",\n  previous: \"Previous\",\n  next: \"Next\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-tip-manager-height: The maximum height of the component.\n * @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.\n */\n\n:host {\n  @apply bg-foreground-1\n  text-color-2\n  text-n1h\n  box-border\n  block;\n\n  * {\n    @apply box-border;\n  }\n\n  --calcite-tip-manager-height: 19vh;\n}\n\n:host([closed]) {\n  @apply hidden;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply border-color-3\n    border-0\n    border-b\n    border-solid\n    py-0;\n\n  padding-inline-end: theme(\"padding.0\");\n  padding-inline-start: theme(\"padding.4\");\n\n  .heading {\n    @apply text-color-1\n      text-1h\n      p-0\n      font-bold;\n  }\n}\n\n.container {\n  @apply focus-base\n    relative\n    overflow-hidden;\n  min-block-size: 150px;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n.tip-container {\n  @apply focus-base\n    mt-px\n    flex\n    items-start\n    justify-center\n    overflow-auto\n    p-4;\n  animation-name: none;\n  animation-duration: var(--calcite-animation-timing);\n  block-size: var(--calcite-tip-manager-height);\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n::slotted(calcite-tip) {\n  @apply m-0 border-none;\n  max-inline-size: var(--calcite-tip-max-width);\n}\n\n.tip-container--advancing {\n  animation-name: tip-advance;\n}\n\n.tip-container--retreating {\n  animation-name: tip-retreat;\n}\n\n/* Pagination Styles*/\n.pagination {\n  @apply flex\n  items-center\n  justify-center\n  px-0\n  pt-3\n  pb-2;\n}\n\n.page-position {\n  @apply text-n2h my-0 mx-2;\n}\n\n/* @keyframes*/\n@keyframes tip-advance {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n@keyframes tip-retreat {\n  0% {\n    @apply opacity-0;\n    transform: translate3d(-50px, 0, 0) scale(0.99);\n  }\n  100% {\n    @apply opacity-100;\n    transform: translate3d(0, 0, 0) scale(1);\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipManagerMessages } from \"./assets/tip-manager/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-tip`s.\n */\n@Component({\n  tag: \"calcite-tip-manager\",\n  styleUrl: \"tip-manager.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TipManager {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, does not display or position the component.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  @Watch(\"closed\")\n  closedChangeHandler(): void {\n    this.direction = null;\n  }\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\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: TipManagerMessages;\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<TipManagerMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipManagerElement;\n\n  @State() selectedIndex: number;\n\n  @Watch(\"selectedIndex\")\n  selectedChangeHandler(): void {\n    this.showSelectedTip();\n    this.updateGroupTitle();\n  }\n\n  @State() tips: HTMLCalciteTipElement[];\n\n  @State() total: number;\n\n  @State() direction: \"advancing\" | \"retreating\";\n\n  @State() groupTitle: string;\n\n  mutationObserver = createObserver(\"mutation\", () => this.setUpTips());\n\n  container: HTMLDivElement;\n\n  @State() defaultMessages: TipManagerMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  async effectiveLocaleChange(): Promise<void> {\n    await updateMessages(this, this.effectiveLocale);\n    this.updateGroupTitle();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.setUpTips();\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    this.updateGroupTitle();\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Selects the next `calcite-tip` to display. */\n  @Method()\n  async nextTip(): Promise<void> {\n    this.direction = \"advancing\";\n    const nextIndex = this.selectedIndex + 1;\n    this.selectedIndex = (nextIndex + this.total) % this.total;\n  }\n\n  /** Selects the previous `calcite-tip` to display. */\n  @Method()\n  async previousTip(): Promise<void> {\n    this.direction = \"retreating\";\n    const previousIndex = this.selectedIndex - 1;\n    this.selectedIndex = (previousIndex + this.total) % this.total;\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipManagerClose: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setUpTips(): void {\n    const tips = Array.from(this.el.querySelectorAll(\"calcite-tip\"));\n    this.total = tips.length;\n    if (this.total === 0) {\n      return;\n    }\n    const selectedTip = this.el.querySelector<HTMLCalciteTipElement>(\"calcite-tip[selected]\");\n\n    this.tips = tips;\n    this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;\n\n    tips.forEach((tip: HTMLCalciteTipElement) => {\n      tip.closeDisabled = true;\n    });\n    this.showSelectedTip();\n  }\n\n  hideTipManager = (): void => {\n    this.closed = true;\n    this.calciteTipManagerClose.emit();\n  };\n\n  showSelectedTip(): void {\n    this.tips.forEach((tip, index) => {\n      const isSelected = this.selectedIndex === index;\n      tip.selected = isSelected;\n      tip.hidden = !isSelected;\n    });\n  }\n\n  updateGroupTitle(): void {\n    if (this.tips) {\n      const selectedTip = this.tips[this.selectedIndex];\n      const tipParent = selectedTip.closest(\"calcite-tip-group\");\n      this.groupTitle = tipParent?.groupTitle || this.messages?.defaultGroupTitle;\n    }\n  }\n\n  previousClicked = (): void => {\n    this.previousTip();\n  };\n\n  nextClicked = (): void => {\n    this.nextTip();\n  };\n\n  tipManagerKeyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target !== this.container) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        this.nextTip();\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        this.previousTip();\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.selectedIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.selectedIndex = this.total - 1;\n        break;\n    }\n  };\n\n  storeContainerRef = (el: HTMLDivElement): void => {\n    this.container = el;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderPagination(): VNode {\n    const dir = getElementDir(this.el);\n    const { selectedIndex, tips, total, messages } = this;\n\n    const nextLabel = messages.next;\n    const previousLabel = messages.previous;\n    const paginationLabel = messages.defaultPaginationLabel;\n\n    return tips.length > 1 ? (\n      <footer class={CSS.pagination}>\n        <calcite-action\n          class={CSS.pagePrevious}\n          icon={dir === \"ltr\" ? ICONS.chevronLeft : ICONS.chevronRight}\n          onClick={this.previousClicked}\n          scale=\"m\"\n          text={previousLabel}\n        />\n        <span class={CSS.pagePosition}>{`${paginationLabel} ${selectedIndex + 1}/${total}`}</span>\n        <calcite-action\n          class={CSS.pageNext}\n          icon={dir === \"ltr\" ? ICONS.chevronRight : ICONS.chevronLeft}\n          onClick={this.nextClicked}\n          scale=\"m\"\n          text={nextLabel}\n        />\n      </footer>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { closed, direction, headingLevel, groupTitle, selectedIndex, messages, total } = this;\n\n    const closeLabel = messages.close;\n\n    if (total === 0) {\n      return null;\n    }\n\n    return (\n      <section\n        aria-hidden={toAriaBoolean(closed)}\n        class={CSS.container}\n        hidden={closed}\n        onKeyDown={this.tipManagerKeyDownHandler}\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={this.storeContainerRef}\n      >\n        <header class={CSS.header}>\n          <Heading class={CSS.heading} level={headingLevel}>\n            {groupTitle}\n          </Heading>\n          <calcite-action\n            class={CSS.close}\n            onClick={this.hideTipManager}\n            scale=\"m\"\n            text={closeLabel}\n          >\n            <calcite-icon icon={ICONS.close} scale=\"m\" />\n          </calcite-action>\n        </header>\n        <div\n          class={{\n            [CSS.tipContainer]: true,\n            [CSS.tipContainerAdvancing]: !closed && direction === \"advancing\",\n            [CSS.tipContainerRetreating]: !closed && direction === \"retreating\",\n          }}\n          key={selectedIndex}\n          tabIndex={0}\n        >\n          <slot />\n        </div>\n        {this.renderPagination()}\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-tip.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.6.0-next.1
+ * v2.6.0-next.3
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -29,7 +29,7 @@ const SLOTS = {
     thumbnail: "thumbnail",
 };
 
-const tipCss = ":host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0px;border-style:none;padding:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{margin-block-end:0.5rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info:only-child{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a: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          )}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+const tipCss = ":host{position:relative;margin:1rem;box-sizing:border-box;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}.container{inline-size:100%;padding:1rem}:host([closed]),:host([closed]) .container{display:none}:host([selected]) .container{margin:0px;border-style:none;padding:0px}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{margin-block-end:0.5rem}.header .heading{padding:0px;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-1)}.container[hidden]{display:none}.content{display:flex}.info{padding-block:0px;padding-inline:1rem;inline-size:70%}.info:only-child{inline-size:100%;padding-inline:0px}::slotted(p){margin-block-start:0px}::slotted(a){outline-color:transparent;color:var(--calcite-color-brand)}::slotted(a: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          )}.image-frame{inline-size:25%}.image-frame img{max-inline-size:100%}::slotted(img){max-inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Tip = /*@__PURE__*/ proxyCustomElement(class Tip extends HTMLElement {
     constructor() {

package/dist/components/calcite-tip.js.map

@@ -1 +1 @@
-{"file":"calcite-tip.js","mappings":"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","names":[],"sources":["src/components/tip/resources.ts","src/components/tip/tip.scss?tag=calcite-tip&encapsulation=shadow","src/components/tip/tip.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  imageFrame: \"image-frame\",\n  content: \"content\",\n  info: \"info\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n};\n",":host {\n  @apply border-color-2\n    bg-foreground-1\n    text-color-2\n    text-n1h\n    relative\n    m-4\n    box-border\n    flex\n    flex-row\n    border\n    border-solid;\n\n  * {\n    @apply box-border;\n  }\n}\n\n.container {\n  @apply w-full p-4;\n}\n\n:host([closed]),\n:host([closed]) .container {\n  @apply hidden;\n}\n\n:host([selected]) .container {\n  @apply m-0 border-none p-0;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply mb-2;\n}\n.header .heading {\n  @apply text-0h text-color-1 p-0;\n}\n\n.container[hidden] {\n  @apply hidden;\n}\n\n.content {\n  @apply flex;\n}\n\n.info {\n  @apply py-0 px-4;\n  inline-size: 70%;\n  &:only-child {\n    @apply w-full px-0;\n  }\n}\n\n::slotted(p) {\n  @apply mt-0;\n}\n\n::slotted(a) {\n  @apply focus-base;\n  color: theme(\"backgroundColor.brand\");\n}\n\n::slotted(a:focus) {\n  @apply focus-outset;\n}\n\n.image-frame {\n  inline-size: theme(\"width[1/4]\");\n  img {\n    @apply max-w-full;\n  }\n}\n\n::slotted(img) {\n  @apply max-w-full;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { constrainHeadingLevel, Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipMessages } from \"./assets/tip/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text and a hyperlink.\n * @slot thumbnail - A slot for adding an HTML image element.\n */\n@Component({\n  tag: \"calcite-tip\",\n  styleUrl: \"tip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, the component does not display.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * When `true`, the close button is not present on the component.\n   */\n  @Prop({ reflect: true }) closeDisabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, the component is selected if it has a parent `calcite-tip-manager`.\n   *\n   * Only one tip can be selected within the `calcite-tip-manager` parent.\n   */\n  @Prop({ reflect: true }) selected = false;\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: TipMessages;\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<TipMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipElement;\n\n  @State() defaultMessages: TipMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipDismiss: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  hideTip = (): void => {\n    this.closed = true;\n\n    this.calciteTipDismiss.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeader(): VNode {\n    const { heading, headingLevel, el } = this;\n    const parentLevel = el.closest(\"calcite-tip-manager\")?.headingLevel;\n    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;\n    const level = headingLevel || relativeLevel;\n\n    return heading ? (\n      <header class={CSS.header}>\n        <Heading class={CSS.heading} level={level}>\n          {heading}\n        </Heading>\n      </header>\n    ) : null;\n  }\n\n  renderDismissButton(): VNode {\n    const { closeDisabled, hideTip } = this;\n    return !closeDisabled ? (\n      <calcite-action\n        class={CSS.close}\n        icon={ICONS.close}\n        onClick={hideTip}\n        scale=\"l\"\n        text={this.messages.close}\n      />\n    ) : null;\n  }\n\n  renderImageFrame(): VNode {\n    const { el } = this;\n\n    return getSlotted(el, SLOTS.thumbnail) ? (\n      <div class={CSS.imageFrame} key=\"thumbnail\">\n        <slot name={SLOTS.thumbnail} />\n      </div>\n    ) : null;\n  }\n\n  renderInfoNode(): VNode {\n    return (\n      <div class={CSS.info}>\n        <slot />\n      </div>\n    );\n  }\n\n  renderContent(): VNode {\n    return (\n      <div class={CSS.content}>\n        {this.renderImageFrame()}\n        {this.renderInfoNode()}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        <article class={CSS.container}>\n          {this.renderHeader()}\n          {this.renderContent()}\n        </article>\n        {this.renderDismissButton()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-tip.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACb,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,GAAG;CACX,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,SAAS,EAAE,WAAW;CACvB;;AChBD,MAAM,MAAM,GAAG,isDAAisD;;MCwCnsD,GAAG;;;;;;;;;;;QA4Gd,YAAO,GAAG;YACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YAEnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;SAC/B,CAAC;sBAvG+C,KAAK;6BAKb,KAAK;;;wBAiBV,KAAK;;;;+BA+Bd,EAAE;;IAd7B,gBAAgB;;KAEf;IAeD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IAQD,iBAAiB;QACf,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACtC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,MAAM,iBAAiB;QACrB,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,oBAAoB;QAClB,kCAAkC,CAAC,IAAI,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;;;;;;IA+BD,YAAY;QACV,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,WAAW,GAAG,EAAE,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE,YAAY,CAAC;QACpE,MAAM,aAAa,GAAG,WAAW,GAAG,qBAAqB,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;QAClF,MAAM,KAAK,GAAG,YAAY,IAAI,aAAa,CAAC;QAE5C,OAAO,OAAO,IACZ,cAAQ,KAAK,EAAE,GAAG,CAAC,MAAM,IACvB,EAAC,OAAO,IAAC,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,IACtC,OAAO,CACA,CACH,IACP,IAAI,CAAC;KACV;IAED,mBAAmB;QACjB,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACxC,OAAO,CAAC,aAAa,IACnB,sBACE,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,IAAI,EAAE,KAAK,CAAC,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,GAAG,EACT,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,GACzB,IACA,IAAI,CAAC;KACV;IAED,gBAAgB;QACd,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEpB,OAAO,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,IACpC,WAAK,KAAK,EAAE,GAAG,CAAC,UAAU,EAAE,GAAG,EAAC,WAAW,IACzC,YAAM,IAAI,EAAE,KAAK,CAAC,SAAS,GAAI,CAC3B,IACJ,IAAI,CAAC;KACV;IAED,cAAc;QACZ,QACE,WAAK,KAAK,EAAE,GAAG,CAAC,IAAI,IAClB,eAAQ,CACJ,EACN;KACH;IAED,aAAa;QACX,QACE,WAAK,KAAK,EAAE,GAAG,CAAC,OAAO,IACpB,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,cAAc,EAAE,CAClB,EACN;KACH;IAED,MAAM;QACJ,QACE,EAAC,QAAQ,QACP,eAAS,KAAK,EAAE,GAAG,CAAC,SAAS,IAC1B,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,aAAa,EAAE,CACb,EACT,IAAI,CAAC,mBAAmB,EAAE,CAClB,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tip/resources.ts","src/components/tip/tip.scss?tag=calcite-tip&encapsulation=shadow","src/components/tip/tip.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  header: \"header\",\n  heading: \"heading\",\n  close: \"close\",\n  imageFrame: \"image-frame\",\n  content: \"content\",\n  info: \"info\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n};\n",":host {\n  @apply border-color-2\n    bg-foreground-1\n    text-color-2\n    text-n1h\n    relative\n    m-4\n    box-border\n    flex\n    flex-row\n    border\n    border-solid;\n\n  * {\n    @apply box-border;\n  }\n}\n\n.container {\n  @apply w-full p-4;\n}\n\n:host([closed]),\n:host([closed]) .container {\n  @apply hidden;\n}\n\n:host([selected]) .container {\n  @apply m-0 border-none p-0;\n}\n\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply mb-2;\n}\n.header .heading {\n  @apply text-0h text-color-1 p-0;\n}\n\n.container[hidden] {\n  @apply hidden;\n}\n\n.content {\n  @apply flex;\n}\n\n.info {\n  @apply py-0 px-4;\n  inline-size: 70%;\n  &:only-child {\n    @apply w-full px-0;\n  }\n}\n\n::slotted(p) {\n  @apply mt-0;\n}\n\n::slotted(a) {\n  @apply focus-base;\n  color: theme(\"backgroundColor.brand\");\n}\n\n::slotted(a:focus) {\n  @apply focus-outset;\n}\n\n.image-frame {\n  inline-size: theme(\"width[1/4]\");\n  img {\n    @apply max-w-full;\n  }\n}\n\n::slotted(img) {\n  @apply max-w-full;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { constrainHeadingLevel, Heading, HeadingLevel } from \"../functional/Heading\";\nimport { TipMessages } from \"./assets/tip/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text and a hyperlink.\n * @slot thumbnail - A slot for adding an HTML image element.\n */\n@Component({\n  tag: \"calcite-tip\",\n  styleUrl: \"tip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n  /**\n   * When `true`, the component does not display.\n   */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * When `true`, the close button is not present on the component.\n   */\n  @Prop({ reflect: true }) closeDisabled = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the number at which section headings should start.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, the component is selected if it has a parent `calcite-tip-manager`.\n   *\n   * Only one tip can be selected within the `calcite-tip-manager` parent.\n   */\n  @Prop({ reflect: true }) selected = false;\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: TipMessages;\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<TipMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTipElement;\n\n  @State() defaultMessages: TipMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when the component has been closed.\n   */\n  @Event({ cancelable: false }) calciteTipDismiss: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  hideTip = (): void => {\n    this.closed = true;\n\n    this.calciteTipDismiss.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeader(): VNode {\n    const { heading, headingLevel, el } = this;\n    const parentLevel = el.closest(\"calcite-tip-manager\")?.headingLevel;\n    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;\n    const level = headingLevel || relativeLevel;\n\n    return heading ? (\n      <header class={CSS.header}>\n        <Heading class={CSS.heading} level={level}>\n          {heading}\n        </Heading>\n      </header>\n    ) : null;\n  }\n\n  renderDismissButton(): VNode {\n    const { closeDisabled, hideTip } = this;\n    return !closeDisabled ? (\n      <calcite-action\n        class={CSS.close}\n        icon={ICONS.close}\n        onClick={hideTip}\n        scale=\"l\"\n        text={this.messages.close}\n      />\n    ) : null;\n  }\n\n  renderImageFrame(): VNode {\n    const { el } = this;\n\n    return getSlotted(el, SLOTS.thumbnail) ? (\n      <div class={CSS.imageFrame} key=\"thumbnail\">\n        <slot name={SLOTS.thumbnail} />\n      </div>\n    ) : null;\n  }\n\n  renderInfoNode(): VNode {\n    return (\n      <div class={CSS.info}>\n        <slot />\n      </div>\n    );\n  }\n\n  renderContent(): VNode {\n    return (\n      <div class={CSS.content}>\n        {this.renderImageFrame()}\n        {this.renderInfoNode()}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        <article class={CSS.container}>\n          {this.renderHeader()}\n          {this.renderContent()}\n        </article>\n        {this.renderDismissButton()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-tooltip.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.6.0-next.1
+ * v2.6.0-next.3
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { q as queryElementRoots, i as isPrimaryPointerButton, D as getShadowRootNode, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tree-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.6.0-next.1
+ * v2.6.0-next.3
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, d as slotChangeHasAssignedElement, a as getElementDir, t as toAriaBoolean, x as filterDirectChildren } from './dom.js';
@@ -36,7 +36,7 @@ const ICONS = {
     blank: "blank",
 };
 
-const treeItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-color-text-3)}.node-actions-container{display:flex}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-actions-container{min-block-size:1.5rem}:host([scale=s]) .node-actions-container .node-container .checkbox,:host([scale=s]) .node-actions-container .node-container .chevron,:host([scale=s]) .node-actions-container .node-container .checkmark,:host([scale=s]) .node-actions-container .node-container .bullet-point{margin-inline:0.25rem}:host([scale=s]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-actions-container{min-block-size:2rem}:host([scale=m]) .node-actions-container .node-container .checkbox,:host([scale=m]) .node-actions-container .node-container .chevron,:host([scale=m]) .node-actions-container .node-container .checkmark,:host([scale=m]) .node-actions-container .node-container .bullet-point{margin-inline:0.5rem}:host([scale=m]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-actions-container{min-block-size:2.75rem}:host([scale=l]) .node-actions-container .node-container .checkbox,:host([scale=l]) .node-actions-container .node-container .chevron,:host([scale=l]) .node-actions-container .node-container .checkmark,:host([scale=l]) .node-actions-container .node-container .bullet-point{margin-inline:0.75rem}:host([scale=l]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{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(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;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          )}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-color-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-color-brand)}:host([hidden]){display:none}[hidden]{display:none}";
+const treeItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-color-text-3)}.node-actions-container{display:flex}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-actions-container{min-block-size:1.5rem}:host([scale=s]) .node-actions-container .node-container .checkbox,:host([scale=s]) .node-actions-container .node-container .chevron,:host([scale=s]) .node-actions-container .node-container .checkmark,:host([scale=s]) .node-actions-container .node-container .bullet-point{margin-inline:0.25rem}:host([scale=s]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-actions-container{min-block-size:2rem}:host([scale=m]) .node-actions-container .node-container .checkbox,:host([scale=m]) .node-actions-container .node-container .chevron,:host([scale=m]) .node-actions-container .node-container .checkmark,:host([scale=m]) .node-actions-container .node-container .bullet-point{margin-inline:0.5rem}:host([scale=m]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-actions-container{min-block-size:2.75rem}:host([scale=l]) .node-actions-container .node-container .checkbox,:host([scale=l]) .node-actions-container .node-container .chevron,:host([scale=l]) .node-actions-container .node-container .checkmark,:host([scale=l]) .node-actions-container .node-container .bullet-point{margin-inline:0.75rem}:host([scale=l]) .node-actions-container .node-container .icon-start{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{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(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;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          )}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-color-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-color-brand)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TreeItem = /*@__PURE__*/ proxyCustomElement(class TreeItem extends HTMLElement {
     constructor() {