Collapsible

import { Collapsible } from "@kobalte/core/collapsible";

export function BasicExample() {
  return (
    <Collapsible class={style.collapsible}>
      <Collapsible.Trigger class={style.collapsible__trigger}>
        <span>What is Kobalte?</span>
        <ChevronDownIcon class={style["collapsible__trigger-icon"]} />
      </Collapsible.Trigger>
      <Collapsible.Content class={style.collapsible__content}>
        <p class={style["collapsible__content-text"]}>
          Kobalte is a UI toolkit for building accessible web apps and design
          systems with SolidJS. It provides a set of low-level UI components and
          primitives which can be the foundation for your design system
          implementation.
        </p>
      </Collapsible.Content>
    </Collapsible>
  );
}

.collapsible {
  width: 300px;
}

.collapsible__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px;
  font-weight: 600;
  border: 1px solid hsl(240 5% 84%);
  color: hsl(240 4% 16%);
  text-align: left;
  outline: none;
}

.collapsible__trigger:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}

.collapsible__trigger-icon {
  width: 20px;
  height: 20px;
  transition: transform 250ms;
}

.collapsible__trigger[data-expanded] .collapsible__trigger-icon {
  transform: rotateZ(180deg);
}

.collapsible__content {
  width: 100%;
  overflow: hidden;
  border: 1px solid hsl(240 5% 84%);
  border-top: none;
  color: hsl(240 4% 16%);
  animation: slideUp 300ms ease-out;
}

.collapsible__content[data-expanded] {
  animation: slideDown 300ms ease-out;
}

.collapsible__content-text {
  padding: 16px;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--kb-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--kb-collapsible-content-height);
  }
  to {
    height: 0;
  }
}

[data-theme*="dark"] .collapsible__trigger,
[data-theme*="dark"] .collapsible__content {
  border-color: hsl(240 5% 65%);
  color: hsl(0 0% 100% / 0.9);
}