diff --git a/.changeset/accordion-no-first-top-border.md b/.changeset/accordion-no-first-top-border.md new file mode 100644 index 0000000..304ce2f --- /dev/null +++ b/.changeset/accordion-no-first-top-border.md @@ -0,0 +1,5 @@ +--- +'@perimetre/ui': patch +--- + +Drop the top border from the first row of the Acorn brand `Accordion`. The component is almost always nested inside a section or card whose own boundary already provides the top edge, so the `first:border-t` rule was visually doubling up. The `--pui-color-border-accordion-first` semantic token is still exported from `tailwind.css`; consumers who want the top border back can add `pui:first:border-t pui:first:border-t-pui-border-accordion-first` via the Accordion's `className` prop. diff --git a/.changeset/fruity-seas-grin.md b/.changeset/fruity-seas-grin.md new file mode 100644 index 0000000..0f15555 --- /dev/null +++ b/.changeset/fruity-seas-grin.md @@ -0,0 +1,5 @@ +--- +'@perimetre/ui': minor +--- + +Add `Collapse` component — a brand-aware, motion-animated disclosure with `CollapseTrigger`, `CollapseHeading`, `CollapseEyebrow`, `CollapseTitle`, `CollapseIcon`, and `CollapseContent` subcomponents for rich-text bodies. diff --git a/packages/ui/src/components/Accordion/brands/Accordion.acorn.brand.ts b/packages/ui/src/components/Accordion/brands/Accordion.acorn.brand.ts index ce30b70..4dccc91 100644 --- a/packages/ui/src/components/Accordion/brands/Accordion.acorn.brand.ts +++ b/packages/ui/src/components/Accordion/brands/Accordion.acorn.brand.ts @@ -4,15 +4,20 @@ import { cva } from '@/lib/cva'; * Acorn brand Accordion variants (default/base theme). * Uses semantic tokens for themeable properties: * - text-pui-fg-*: title/body/eyebrow colors - * - border-pui-border-accordion-*: per-position dividers (first / between / last) + * - border-pui-border-accordion-*: per-position dividers (between / last) * - --pui-typo-accordion-*: title and content typography (applied inline * below — these tokens are accordion-specific, so no `@utility` is needed) + * + * No top border on the first row: an accordion is almost always nested + * inside a section or card whose own boundary already provides the top + * edge, and authors who do want a top border can re-add it through the + * `pui:first:border-t-pui-border-accordion-first` utility (the semantic + * token still ships in tailwind.css for that exact purpose). */ export const accordionAcornVariants = cva({ base: [ 'pui:flex pui:w-full pui:flex-col', 'pui:border-b pui:border-pui-border-accordion-between', - 'pui:first:border-t pui:first:border-t-pui-border-accordion-first', 'pui:last:border-b-pui-border-accordion-last' ] });