It works! But the visual experience can still be improved, and changing the selected item is a bit jarring. This is a great place to use animation to provide feedback about what's happening.

Animating elements can be tricky, so you'll tackle it in a few steps. First, the DOM and styling needs to change a bit. When the selection changes, the carousel should animate from the previously selected item to the newly selected one. To do so, it needs to be able to display both the previous and selected items.

Import the styleMap directive and update the render method as follows:

import {styleMap} from 'lit/directives/style-map.js';

// ...
private left = 0;
render() {
  if (this.hasValidSelected()) {
    this.selectedInternal = this.selected;
  }
  const animateLeft = ``;
  const selectedLeft = ``;
  const previousLeft = ``;
  return html`
    <div class="fit"
      @click=${this.clickHandler}
      style=${styleMap({left: animateLeft})}
    >
      <div class="fit" style=${styleMap({left: previousLeft})}>
        <slot name="previous"></slot>
      </div>
      <div class="fit selected" style=${styleMap({left: selectedLeft})}>
        <slot name="selected"></slot>
      </div>
    </div>
  `;
}

import {styleMap} from 'lit/directives/style-map.js';

// ...
left = 0;
render() {
  if (this.hasValidSelected()) {
    this.selectedInternal = this.selected;
  }
  const animateLeft = ``;
  const selectedLeft = ``;
  const previousLeft = ``;
  return html`
    <div class="fit"
      @click=${this.clickHandler}
      style=${styleMap({left: animateLeft})}
    >
      <div class="fit" style=${styleMap({left: previousLeft})}>
        <slot name="previous"></slot>
      </div>
      <div class="fit selected" style=${styleMap({left: selectedLeft})}>
        <slot name="selected"></slot>
      </div>
    </div>
  `;
}

The selected item needs to slide into view. To do this, there's a slot for the previous element. This enables the positions of the previously and currently selected items to be managed.

There's a "container" element surrounding the items that will animate left or right. The @click handler now makes more sense on the "container" so no clicks are missed.

In the following steps, you will set the left property and use it to calculate values for the styleMap directives used on the "container" and the previous and selected slots.

The selected item will not display after this change to the template. That's because it moves below the previous slot. You can verify this by removing overflow: hidden in the :host selector. To fix this, style the selected slot container's top to move it up.

Add the following css to the styles module:

.selected {
  top: -100%;
}