Disclosure

Disclosure.vue

<template>
  <PeachyDisclosure.Disclosure>
    <PeachyDisclosure.Trigger>
      Disclosure

      <ChevronSvg />
    </PeachyDisclosure.Trigger>

    <Transition name="disclosure">
      <PeachyDisclosure.Target>
        <p>Content</p>
      </PeachyDisclosure.Target>
    </Transition>
  </PeachyDisclosure.Disclosure>
</template>

disclosure.css

.peachy-disclosure {
  width: var(--component-width);
  background: var(--button-bg);
  border-radius: var(--border-radius);
}

.peachy-disclosure__trigger {
  cursor: pointer;
  transition: background 0.25s;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);

  width: 100%;
  padding: 0.75em;

  border: none;
  border-radius: var(--border-radius);

  font-size: 120%;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;

  background: var(--button-bg);
}

.peachy-disclosure__trigger:hover,
.peachy-disclosure:focus-visible {
  background: var(--button-hover-bg);
}

.peachy-disclosure__trigger svg {
  transform-origin: center;
  transform: rotate(90deg);

  transition: transform 0.25s;
}

.peachy-disclosure__trigger[aria-expanded="true"] svg {
  transform: rotate(-90deg);
}

.peachy-disclosure__content {
  overflow: hidden;
}

.peachy-disclosure__content p {
  padding: 0.75em;
  margin: 0;
}

/* ===== Animation ===== */

.peachy-disclosure__content {
  max-height: 10rem;
}

@media (prefers-reduced-motion: no-preference) {
  .disclosure-enter-active,
  .disclosure-leave-active {
    transition: max-height 0.25s;
  }
}

.disclosure-enter-from,
.disclosure-leave-to {
  max-height: 0;
}

Anatomy

<template>
  <PeachyDisclosure.Disclosure>
    <PeachyDisclosure.Trigger />
    <PeachyDisclosure.Target />
  </PeachyDisclosure.Disclosure>
</template>

<script lang="ts" setup>
  import { PeachyDisclosure } from "typeach";
</script>

Props & Emits

Disclosure

Props

Name	Default	Type
open	false	boolean?

Emits

@	Payload
update:open	boolean

---

Trigger

Props

Name	Default	Type	Description
is	button	string?	The is attribute for the dynamic root component.

Styling

CSS Selectors

Follows our CSS classes convention.

State selectors

Selector	Description	For
[aria-expanded="<boolean>"]	For open state.	Trigger
[data-open="<boolean>"]	For open state.	Target

Accessibility

Resources: API Disclosure Pattern, Scott O'Hara's "The details and summary elements, again"

Keyboard interactions

Key	Action
Space Enter when on the trigger	Opens the disclosure.