4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1090,"use client"; import * as React from "react"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { useDisclosureHeight } from "@/lib/cojeev-motion/use-disclosure-height"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Icon } from "@/components/ui/icon"; import * as Primitive from "@radix-ui/react-accordion"; export const accordionVariants = cva("v-acc [display:grid] [gap:8px]"); export type AccordionAppearance = "faq" | "chapters" | "editorial"; const AccordionAppearanceContext = React.createContext< AccordionAppearance | undefined >(undefined); export type AccordionProps = React.ComponentProps & { /** Optional structural treatment. Omit to preserve the original painted cards. */ appearance?: AccordionAppearance; }; export function Accordion({ className, appearance, ...props }: AccordionProps) { const { quiet } = useChoreography(); return ( ); } export type AccordionItemProps = React.ComponentProps; export function AccordionItem({ className, ref, ...props }: AccordionItemProps) { const appearance = React.useContext(AccordionAppearanceContext); const morphRef = useMorph("cards", ref); return ( ); } export type AccordionTriggerProps = React.ComponentProps< typeof Primitive.Trigger > & { indicator?: React.ReactNode }; export function AccordionTrigger({ className, children, indicator, ...props }: AccordionTriggerProps) { return ( {props.asChild ? ( children ) : ( <> {children} {indicator ?? } )} ); } export type AccordionContentProps = React.ComponentProps< typeof Primitive.Content >; export function AccordionContent({ className, ref, children, ...props }: AccordionContentProps) { const contentRef = React.useRef(null); React.useImperativeHandle(ref, () => contentRef.current!); useDisclosureHeight(contentRef, props.style?.animationName); return (

{children}

); } export type AccordionIndicatorProps = React.ComponentProps<"svg">; export function AccordionIndicator({ className, ...props }: AccordionIndicatorProps) { const appearance = React.useContext(AccordionAppearanceContext); return ( ); } 51:T7c10,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"] { background: var(--card); border-radius: var(--r-card-sm); overflow: hidden; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] { list-style: none; display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 600; font-size: var(--fs-body); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] .v-chev { margin-left: auto; transition: transform var(--t-element) var(--enter); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-item"][data-state="open"] [data-slot="accordion-trigger"] .v-chev { transform: rotate(180deg); } .v-acc__body:where([data-slot="accordion"], [data-slot^="accordion-"]) { padding: 0 var(--s-4) var(--s-4); color: var(--muted-foreground); font-size: var(--fs-body); line-height: var(--lh-body); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) { interpolate-size: allow-keywords; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"] { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px transparent; transition: background var(--t-element) var(--enter), box-shadow var(--t-element) var(--enter); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] { background: var(--v-canvas); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v-edge) 70%, var(--v-border)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] { min-height: 60px; padding: 12px 16px 12px 12px; gap: 14px; font-weight: 600; font-size: var(--fs-body); line-height: 1.3; border-radius: 18px; transition: background var(--t-micro); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:not([data-state="open"]) > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--card) 90%, var(--v-ink)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--v-canvas) 94%, var(--v-ink)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"]:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; border-radius: 18px; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] > .v-icon:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--v-canvas); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-border); transition: background var(--t-element) var(--enter), box-shadow var(--t-element); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > h3 > [data-slot="accordion-trigger"] > .v-icon:first-child { background: var(--v-pink); box-shadow: none; color: var(--v-on-accent); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] .v-chev { width: 18px; height: 18px; color: var(--v-text-2); stroke-width: 2; transition: transform var(--t-max) var(--enter), color var(--t-micro); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > h3 > [data-slot="accordion-trigger"] .v-chev { color: var(--v-text); } .v-acc__body:where([data-slot="accordion"], [data-slot^="accordion-"]) { padding: 0 16px 18px 62px; color: var(--v-text-2); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 60ch; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > .v-acc__body { animation: none; } @media (max-width: 640px) { .v-acc__body:where([data-slot="accordion"], [data-slot^="accordion-"]) { padding-left: 16px; } } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"] { position: relative; border-radius: 20px; background: var(--card); box-shadow: none; overflow: hidden; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] { box-shadow: none; color: var(--v-on-accent); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]::after { content: ""; position: absolute; right: -8%; top: -30%; width: 46%; aspect-ratio: 1; -webkit-mask: var(--wm-m) center/contain no-repeat; mask: var(--wm-m) center/contain no-repeat; opacity: 0; transform: translate(12px, -12px) rotate(-8deg) scale(0.9); transition: opacity var(--t-max) var(--enter), transform var(--t-max) var(--enter); pointer-events: none; z-index: 0; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"]::after { opacity: 0.9; transform: none; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 1):not( [class*=" -"] )[data-state="open"], .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-pink[data-state="open"] { background: var(--v-pink); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 1):not([class*=" -"])::after, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-pink::after { background: var(--v-pink-deep); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90C22 68 6 52 6 33A20 20 0 0 1 50 21A20 20 0 0 1 94 33C94 52 78 68 50 90Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 90C22 68 6 52 6 33A20 20 0 0 1 50 21A20 20 0 0 1 94 33C94 52 78 68 50 90Z'/%3E%3C/svg%3E"); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 1):not([class*=" -"]):not( [data-state="open"] ) > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-pink:not([data-state="open"]) > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--card) 88%, var(--v-pink)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 1):not( [class*=" -"] )[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-pink[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--v-pink) 92%, var(--ink-fixed)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 2):not( [class*=" -"] )[data-state="open"], .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-yellow[data-state="open"] { background: var(--v-yellow); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 2):not([class*=" -"])::after, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-yellow::after { background: var(--v-yellow-deep); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2l12 30 30 12-30 12-12 30-12-30-30-12 30-12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2l12 30 30 12-30 12-12 30-12-30-30-12 30-12z'/%3E%3C/svg%3E"); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 2):not([class*=" -"]):not( [data-state="open"] ) > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-yellow:not([data-state="open"]) > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--card) 88%, var(--v-yellow)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 2):not( [class*=" -"] )[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-yellow[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--v-yellow) 92%, var(--ink-fixed)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 3):not( [class*=" -"] )[data-state="open"], .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-blue[data-state="open"] { background: var(--v-blue); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 3):not([class*=" -"])::after, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-blue::after { background: var(--v-blue-deep); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='24' r='20'/%3E%3Ccircle cx='76' cy='50' r='20'/%3E%3Ccircle cx='50' cy='76' r='20'/%3E%3Ccircle cx='24' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='24' r='20'/%3E%3Ccircle cx='76' cy='50' r='20'/%3E%3Ccircle cx='50' cy='76' r='20'/%3E%3Ccircle cx='24' cy='50' r='20'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3C/svg%3E"); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 3):not([class*=" -"]):not( [data-state="open"] ) > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-blue:not([data-state="open"]) > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--card) 88%, var(--v-blue)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n + 3):not( [class*=" -"] )[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-blue[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--v-blue) 92%, var(--ink-fixed)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n):not( [class*=" -"] )[data-state="open"], .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-olive[data-state="open"] { background: var(--v-olive); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n):not([class*=" -"])::after, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-olive::after { background: var(--v-olive-deep); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 5A45 45 0 1 0 60 95A50 50 0 0 1 60 5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 5A45 45 0 1 0 60 95A50 50 0 0 1 60 5Z'/%3E%3C/svg%3E"); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n):not([class*=" -"]):not( [data-state="open"] ) > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-olive:not([data-state="open"]) > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--card) 88%, var(--v-olive)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:nth-of-type(4n):not( [class*=" -"] )[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover, .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"].-olive[data-state="open"] > h3 > [data-slot="accordion-trigger"]:hover { background: color-mix(in oklab, var(--v-olive) 92%, var(--ink-fixed)); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] { position: relative; z-index: 1; min-height: 64px; padding: 12px 14px 12px 12px; gap: 14px; border-radius: 20px; font-size: 15.5px; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] > .v-icon:first-child { position: relative; width: 40px; height: 40px; padding: 10px; border-radius: 14px 14px 14px 5px; background: var(--v-paper); box-shadow: none; color: var(--v-on-accent); transition: background var(--t-max) var(--enter), border-radius var(--t-max) var(--enter), color var(--t-micro); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > h3 > [data-slot="accordion-trigger"] > .v-icon:first-child { background: var(--v-ink); color: var(--v-on-ink); border-radius: 50%; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] > .v-icon:first-child::after { content: none; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"] .v-chev { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--v-canvas); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-border); stroke-width: 2.2; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > h3 > [data-slot="accordion-trigger"] .v-chev { background: var(--ink-fixed); color: var(--v-paper); box-shadow: none; transform: rotate(180deg); } .v-acc__body:where([data-slot="accordion"], [data-slot^="accordion-"]) { position: relative; z-index: 1; padding: 2px 18px 20px 66px; color: var(--v-on-accent); font-size: 15px; line-height: 1.5; max-width: 56ch; } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > .v-acc__body { color: var(--v-on-accent); } .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) [data-slot="accordion-trigger"]:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; } @media (max-width: 640px) { .v-acc__body:where([data-slot="accordion"], [data-slot^="accordion-"]) { padding-left: 18px; } } :root[data-mode="dark"] .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"], :root[data-mode="dark"] .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] [data-slot="accordion-trigger"], :root[data-mode="dark"] .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"][data-state="open"] > .v-acc__body { color: var(--v-on-accent); } :root[data-mode="dark"] .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:not([data-state="open"]) [data-slot="accordion-trigger"] { color: var(--v-text); } :root[data-mode="dark"] .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:not([data-state="open"]) [data-slot="accordion-trigger"] > .v-icon:first-child { background: var(--v-beige-2); color: var(--v-text); } :root[data-mode="dark"] .v-acc:where(:not([data-appearance])):where( [data-slot="accordion"], [data-slot^="accordion-"] ) > [data-slot="accordion-item"]:not([data-state="open"]) [data-slot="accordion-trigger"] .v-chev { background: var(--v-beige-2); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-border); } @keyframes v-acc-in { from { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { [data-slot="accordion"], [data-slot^="accordion-"], [data-slot="accordion"]::before, [data-slot="accordion"]::after, [data-slot^="accordion-"]::before, [data-slot^="accordion-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } /* Radix's heading keeps native summary geometry without adding a layout box. */ [data-slot="accordion-item"] > h3 > [data-slot="accordion-trigger"], [data-slot="accordion-item"] > h3 > [data-slot="accordion-trigger"] { width: 100%; } [data-slot="accordion-item"] > h3 { display: contents; } /* Height has one interruptible Motion owner. This nonvisual exit lets Radix retain the content until collapse ends; hidden children are inert immediately. */ .v-acc [data-slot="accordion-content"] { padding: 0; overflow: hidden; animation: none; } .v-acc [data-slot="accordion-content-inner"] { padding: 2px 18px 20px 66px; } .v-acc [data-slot="accordion-content"][data-state="closed"]:not([hidden]) { display: block; animation: v-acc-retain var(--disclosure-exit-duration, 220ms) linear; } @keyframes v-acc-retain { from { visibility: visible; } to { visibility: visible; } } @media (max-width: 600px) { .v-acc [data-slot="accordion-content-inner"] { padding-inline: 18px; } } @media (prefers-reduced-motion: reduce) { .v-acc [data-slot="accordion-content"][data-state="closed"] { animation-duration: 0s; } } /* Optional authored compositions. Legacy painted-card defaults above remain intact. */ .v-acc[data-appearance] { width: 100%; min-width: 0; color: var(--v-text); gap: 10px; } .v-acc[data-appearance] > [data-slot="accordion-item"] { --acc-accent: var(--v-pink); --acc-companion: var(--v-yellow); --mfill: var(--card); position: relative; min-width: 0; border-radius: 18px; background: var(--mfill); color: var(--v-text); overflow: visible; isolation: isolate; } .v-acc[data-appearance] > [data-slot="accordion-item"]:nth-of-type(3n + 2) { --acc-accent: var(--v-blue); --acc-companion: var(--v-pink); } .v-acc[data-appearance] > [data-slot="accordion-item"]:nth-of-type(3n) { --acc-accent: var(--v-yellow); --acc-companion: var(--v-olive); } /* Keep the authored CSS fallback, but let the mounted contour own visible paint. Its hook briefly suspends this selector while sampling state/theme colours. */ :root .v-acc[data-appearance] > [data-slot="accordion-item"]:has(> svg.v-morph) { background: transparent; box-shadow: none; } .v-acc[data-appearance] [data-slot="accordion-trigger"] { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 20px 24px; border-radius: inherit; background: transparent; color: inherit; text-align: start; cursor: pointer; } .v-acc[data-appearance] [data-slot="accordion-trigger"]:focus-visible { /* --v-focus is not a defined token; without the fallback the whole shorthand is invalid and the keyboard ring disappears. */ outline: 2px solid var(--v-focus, var(--ring)); outline-offset: -3px; } .v-acc[data-appearance] [data-slot="accordion-trigger"]:disabled { color: var(--v-disabled-ink); cursor: not-allowed; } .v-acc[data-appearance] [data-slot="accordion-indicator"] { flex: none; width: 36px; height: 36px; padding: 8px; margin-inline-start: auto; color: inherit; pointer-events: none; border: 1px solid currentColor; border-radius: 50%; transition: transform var(--t-element) var(--enter), border-radius var(--t-element) var(--enter); } .v-acc[data-appearance] [data-slot="accordion-trigger"][data-state="open"] [data-slot="accordion-indicator"] { transform: rotate(180deg); border-radius: 38% 48% 40% 46%; } .v-acc[data-appearance] [data-slot="accordion-content"] { max-width: none; color: var(--v-text-2); } .v-acc[data-appearance] [data-slot="accordion-content-inner"] { padding: 0 76px 26px 24px; } .v-acc__summary { display: grid; gap: 5px; min-width: 0; line-height: 1.35; text-wrap: balance; } .v-acc__summary small { font-size: 13px; font-weight: 400; color: inherit; opacity: 0.8; } .v-acc__detail { display: grid; gap: 12px; min-width: 0; align-content: center; } .v-acc__detail p { margin: 0; font-size: 14px; line-height: 1.7; max-width: 60ch; } .v-acc__eyebrow { font-size: 12px; color: inherit; font-weight: 500; } .v-acc[data-appearance="faq"] { gap: 12px; } /* A resting question carries a trace of its own accent, so the list separates without a rule between items. The open accent below still wins. */ .v-acc[data-appearance="faq"] > [data-slot="accordion-item"] { --mfill: color-mix(in oklab, var(--card) 93%, var(--acc-accent)); background: var(--mfill); } .v-acc[data-appearance="faq"] > [data-slot="accordion-item"][data-state="open"] { --mfill: var(--acc-accent); background: var(--acc-accent); color: var(--v-on-accent); } .v-acc[data-appearance="faq"] > [data-slot="accordion-item"]:not([data-state="open"]):has( [data-slot="accordion-trigger"]:hover:not(:disabled) ) { --mfill: color-mix(in oklab, var(--card) 88%, var(--acc-accent)); background: color-mix(in oklab, var(--card) 88%, var(--acc-accent)); } .v-acc[data-appearance="faq"] [data-slot="accordion-content"] { color: inherit; } .v-acc[data-appearance="faq"] [data-state="open"] [data-slot="accordion-indicator"] { transform: none; } .v-acc[data-appearance="faq"] [data-slot="accordion-indicator"] [data-icon-part="1"] { transform-origin: 12px 12px; transition: transform var(--t-element) var(--enter); } .v-acc[data-appearance="faq"] [data-state="open"] [data-slot="accordion-indicator"] [data-icon-part="1"] { transform: scaleY(0); } .v-acc[data-appearance="chapters"] { /* One reading column: the trigger inset, the numbered spine and the answer indent are all derived from these three measurements. */ --acc-inset: 16px; --acc-index: 42px; --acc-gap: 20px; padding: 10px; gap: 4px; border-radius: 20px; background: var(--v-beige-2); box-shadow: 0 3px 0 var(--v-border); } .v-acc[data-appearance="chapters"] > [data-slot="accordion-item"] { --mfill: var(--v-beige-2); background: var(--v-beige-2); border-radius: 12px; } .v-acc[data-appearance="chapters"] > [data-slot="accordion-item"][data-state="open"] { --mfill: var(--v-canvas); background: var(--v-canvas); } .v-acc[data-appearance="chapters"] [data-slot="accordion-trigger"] { padding: 18px var(--acc-inset); gap: var(--acc-gap); } .v-acc__index { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--v-text-2); } .v-acc[data-appearance="chapters"] .v-acc__index { display: grid; place-items: center; width: var(--acc-index); height: 48px; font-family: var(--font-display); font-size: 22px; background: var(--acc-accent); color: var(--v-on-accent); border-radius: 8px 8px 18px 8px; transition: border-radius var(--t-element) var(--enter); } .v-acc[data-appearance="chapters"] [data-state="open"] > h3 .v-acc__index { border-radius: 42% 46% 40% 48%; } .v-acc[data-appearance="chapters"] [data-slot="accordion-content-inner"] { /* Spine through the centre of the number; answer on the summary's own start. */ margin-inline-start: calc(var(--acc-inset) + var(--acc-index) / 2); padding: 0 24px 28px calc(var(--acc-index) / 2 + var(--acc-gap) - 1px); border-inline-start: 1px dashed var(--v-border); } .v-acc[data-appearance="chapters"] [data-slot="accordion-indicator"] { border-color: transparent; padding: 6px; width: 28px; height: 28px; } .v-acc[data-appearance="editorial"] { gap: 12px; } .v-acc[data-appearance="editorial"] > [data-slot="accordion-item"] { background: var(--card); border-radius: 20px; } .v-acc[data-appearance="editorial"] > [data-slot="accordion-item"][data-state="open"] { --mfill: var(--acc-accent); background: var(--acc-accent); color: var(--v-on-accent); } .v-acc[data-appearance="editorial"] > [data-state="open"] [data-slot="accordion-content"] { color: inherit; } .v-acc[data-appearance="editorial"] [data-slot="accordion-trigger"] { padding: 24px; gap: 24px; } .v-acc[data-appearance="editorial"] .v-acc__index { font-family: var(--font-display); font-size: 36px; font-weight: 400; letter-spacing: -0.03em; color: inherit; } .v-acc[data-appearance="editorial"] .v-acc__summary > span { font-family: var(--font-display); font-size: clamp(20px, 2.5cqi, 26px); font-weight: 500; } .v-acc[data-appearance="editorial"] [data-slot="accordion-content-inner"] { /* A supporting motif accompanies the answer; it never competes for width. */ --acc-art: 96px; display: grid; grid-template-columns: var(--acc-art) minmax(0, 1fr); align-items: start; gap: 28px; padding: 0 28px 30px; } .v-acc__preview { position: relative; display: grid; place-items: center; grid-template: var(--acc-art, 150px) auto / minmax(0, 1fr); color: var(--v-on-accent); pointer-events: none; } .v-acc__preview :is(.v-acc__preview-shape, .v-acc__preview-echo, .v-acc__preview-letter) { grid-area: 1 / 1; } .v-acc__preview-shape, .v-acc__preview-echo { width: min(100%, var(--acc-art, 150px)); height: var(--acc-art, 150px); color: var(--acc-companion); transform: rotate(-12deg); transition: transform var(--t-element) var(--enter); } .v-acc__preview-echo { transform: translate( calc(var(--acc-art, 150px) * 0.047), calc(var(--acc-art, 150px) * -0.027) ) rotate(8deg); color: currentColor; opacity: 0.45; } .v-acc__preview-letter { z-index: 1; font-family: var(--font-display); font-size: calc(var(--acc-art, 150px) * 0.32); letter-spacing: -0.03em; } .v-acc__preview-letter > .v-icon { width: calc(var(--acc-art, 150px) * 0.27); height: calc(var(--acc-art, 150px) * 0.27); stroke-width: 1.5; } .v-acc__preview-caption { grid-area: 2 / 1; font-size: 11px; text-align: center; line-height: 1.4; } .v-acc[data-appearance="editorial"] [data-slot="accordion-item"]:hover .v-acc__preview-shape { transform: rotate(4deg); } .v-acc[data-motion-quiet] :is( [data-slot="accordion-indicator"], [data-icon-part], .v-acc__preview-shape, .v-acc__preview-echo, .v-acc__index ) { transition: none; } .v-acc[data-motion-quiet] [data-slot="accordion-item"]:hover .v-acc__preview-shape { transform: rotate(-12deg); } @media (max-width: 600px) { .v-acc[data-appearance] [data-slot="accordion-trigger"] { padding: 18px; gap: 12px; } .v-acc[data-appearance] [data-slot="accordion-content-inner"] { padding: 0 18px 22px; } .v-acc[data-appearance="editorial"] [data-slot="accordion-content-inner"] { --acc-art: 56px; gap: 16px; padding: 0 18px 20px; } .v-acc[data-appearance="editorial"] [data-slot="accordion-trigger"] { padding: 18px; gap: 10px; } .v-acc[data-appearance="editorial"] .v-acc__index { font-size: 24px; } .v-acc__preview-caption { display: none; } .v-acc[data-appearance="chapters"] { --acc-inset: 18px; --acc-index: 32px; --acc-gap: 12px; padding: 6px; } .v-acc[data-appearance="chapters"] .v-acc__index { height: 40px; font-size: 18px; } .v-acc[data-appearance="chapters"] [data-slot="accordion-trigger"] { padding: 18px var(--acc-inset); gap: var(--acc-gap); } .v-acc[data-appearance="chapters"] [data-slot="accordion-content-inner"] { padding-inline-start: calc(var(--acc-index) / 2 + var(--acc-gap) - 1px); } } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","@radix-ui/react-accordion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-accordion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-accordion"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/icon.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/accordion.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/accordion.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/accordion.css","content":"$51","type":"registry:file","target":"styles/cojeev/accordion.css"}],"className":"h-[70svh] min-h-80"}]]}]