carousel-css.md

:host {
  section {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--bto-carousel-width, 200px);
    gap: var(--bto-carosel-gap, 8px);
    padding: var(--bto-carousel-padding-container, 10px 0);
    overflow-x: auto;
  }

  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

carousel.md

import { LitElement, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { Direction } from '@bto-ui/types'

import './carousel.scss'

@customElement('bto-carousel')
export class Field extends LitElement {
  @property({ type: String, reflect: true }) direction: Direction = 'left'

  get paddingContainer() {
    const padding = 'var(--bto-carousel-padding, 10px)'
    return this.direction === 'left'
      ? `${padding} 0 ${padding} ${padding}`
      : `${padding} ${padding} ${padding} 0`
  }

  firstUpdated(props: Map<string, unknown>) {
    super.firstUpdated(props)
    this.style.setProperty(
      '--bto-carousel-padding-container',
      this.paddingContainer
    )
  }

  render() {
    return html`
      <section part="carousel">
        <slot></slot>
      </section>
    `
  }
}