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;
  border-radius: 6px;
  border: 1px solid hsl(240 6% 90%);
  background-color: white;
  color: hsl(240 4% 16%);
}

.collapsible__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: none;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  outline: none;
  cursor: pointer;
  background: none;
  transition:
    border-color 250ms,
    color 250ms;
}

.collapsible__trigger:hover {
  background-color: hsl(240 6% 97%);
}

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

.collapsible__trigger-icon {
  width: 20px;
  height: 20px;
  color: hsl(240 5% 46%);
  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

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

.collapsible__content {
  overflow: hidden;
  font-size: 14px;
  animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.collapsible__content[data-expanded] {
  animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.collapsible__content-text {
  padding: 16px;
  color: hsl(240 5% 26%);
}

@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 {
  border-color: hsl(240 5% 34%);
  background-color: hsl(240 4% 16%);
  color: hsl(0 100% 100% / 0.9);
}

[data-theme*="dark"] .collapsible__trigger:hover {
  background-color: hsl(240 4% 22%);
}

[data-theme*="dark"] .collapsible__trigger-icon {
  color: hsl(240 5% 65%);
}

[data-theme*="dark"] .collapsible__content-text {
  color: hsl(0 100% 100% / 0.9);
}