Getting Started

import { Popover } from "@kobalte/core/popover";
import { CrossIcon } from "some-icon-library";
import "./style.css";

function App() {
  <Popover>
    <Popover.Trigger class="popover__trigger">Learn more</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content class="popover__content">
        <Popover.Arrow />
        <div class="popover__header">
          <Popover.Title class="popover__title">About Kobalte</Popover.Title>
          <Popover.CloseButton class="popover__close-button">
            <CrossIcon />
          </Popover.CloseButton>
        </div>
        <Popover.Description class="popover__description">
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </Popover.Description>
      </Popover.Content>
    </Popover.Portal>
  </Popover>;
}

.popover__trigger {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: auto;
  outline: none;
  border: none;
  border-radius: 6px;
  padding: 0 16px;
  background-color: hsl(200 98% 39%);
  color: white;
  font-size: 16px;
  line-height: 0;
  transition: 250ms background-color;
}

.popover__trigger:hover {
  background-color: hsl(201 96% 32%);
}

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

.popover__trigger:active {
  background-color: hsl(201 90% 27%);
}

.popover__content {
  z-index: 50;
  max-width: min(calc(100vw - 16px), 380px);
  border: 1px solid hsl(240 5% 84%);
  border-radius: 6px;
  padding: 12px;
  background-color: white;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.popover__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.popover__close-button {
  height: 16px;
  width: 16px;
  color: hsl(240 5% 34%);
}

.popover__title {
  font-size: 16px;
  font-weight: 500;
  color: hsl(240 6% 10%);
}

.popover__description {
  font-size: 14px;
  color: hsl(240 5% 26%);
}