/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
import { g as guid } from "../../chunks/guid.js";
const CSS = {
  container: "container",
  selected: "selected"
};
const idPrefix = "calcite-carousel-item";
const IDS = {
  host: (id) => `${idPrefix}-${id}`
};
const styles = css`:host{display:flex}.container{display:none;inline-size:var(--calcite-container-size-content-fluid)}:host([selected]) .container{display:block}:host([hidden]){display:none}[hidden]{display:none}`;
class CarouselItem extends LitElement {
  constructor() {
    super(...arguments);
    this.guid = IDS.host(guid());
    this.selected = false;
  }
  static {
    this.properties = { label: 1, selected: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  render() {
    const id = this.el.id || this.guid;
    setAttribute(this.el, "id", id);
    return html`<div .ariaLabel=${this.label} class=${safeClassMap({ [CSS.container]: true, [CSS.selected]: this.selected })} role=tabpanel><slot></slot></div>`;
  }
}
customElement("calcite-carousel-item", CarouselItem);
export {
  CarouselItem
};
