{"name":"accordion","title":"Accordion","description":"A vertically stacked set of interactive headings that each reveal a section of content.","installCommand":"bunx marko-ui add accordion -y","usageTags":"<Accordion>","importSnippet":"import Accordion from \"@/components/ui/accordion/accordion.marko\";","usageSnippet":"static const items = [\n  { value: \"item-1\", title: \"Is it accessible?\", content: \"Yes.\" },\n  { value: \"item-2\", title: \"Is it styled?\", content: \"Yes.\" },\n];\n\n<Accordion items=items collapsible/>","tags":["Accordion"],"parts":[{"name":"item","attributes":[{"name":"value","type":"string","required":true},{"name":"title","type":"string","required":true}],"repeatable":true}],"props":[{"name":"collapsible","type":"boolean | undefined","required":false,"default":"false","description":"Whether an accordion item can be closed after it has been expanded."},{"name":"defaultValue","type":"string[] | undefined","required":false,"description":"The initial value of the expanded accordion items.\nUse when you don't need to control the value of the accordion."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the accordion items are disabled"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the accordion. Useful for composition."},{"name":"items","type":"AccordionItem[]","required":false},{"name":"multiple","type":"boolean | undefined","required":false,"default":"false","description":"Whether multiple accordion items can be expanded at the same time."},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"vertical","description":"The orientation of the accordion items."},{"name":"value","type":"string[] | undefined","required":false,"description":"The controlled value of the expanded accordion items."}],"events":[{"name":"onFocusChange","arg":"FocusChangeDetails","description":"The callback fired when the focused accordion item changes."},{"name":"onValueChange","arg":"ValueChangeDetails","description":"The callback fired when the state of expanded/collapsed accordion items changes."},{"name":"valueChange","arg":"string[]"}],"keyboard":[{"keys":"Tab / Shift+Tab","description":"Moves focus to the next/previous focusable trigger."},{"keys":"Enter / Space","description":"Toggles the focused item's expanded state."},{"keys":"Down Arrow","description":"Moves focus to the next trigger, looping to the first."},{"keys":"Up Arrow","description":"Moves focus to the previous trigger, looping to the last."},{"keys":"Home","description":"Moves focus to the first trigger."},{"keys":"End","description":"Moves focus to the last trigger."}],"accessibilityNotes":["Full keyboard navigation is supported, adhering to the WAI-ARIA Accordion design pattern.","Each trigger is a real `<button>` inside an `<h3>`, so it participates in the page's heading outline."],"examples":[{"id":"accordion-demo","title":"Default","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"item-1\",\n    title: \"Is it accessible?\",\n    content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"Is it styled?\",\n    content: \"Yes. It comes with default styles that match the other components' aesthetic.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"Is it animated?\",\n    content: \"Yes. It's animated by default, but you can disable it if you prefer.\",\n  },\n];\n\n<Accordion items=items collapsible defaultValue=[\"item-1\"] class=\"w-full max-w-md\"/>","description":"A single item at a time can be open. Pass `collapsible` to allow closing the open item."},{"id":"accordion-basic","title":"Basic","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"item-1\",\n    title: \"How do I reset my password?\",\n    content:\n      \"Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"Can I change my subscription plan?\",\n    content:\n      \"Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"What payment methods do you accept?\",\n    content:\n      \"We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.\",\n  },\n];\n\n<Accordion items=items defaultValue=[\"item-1\"] class=\"max-w-lg\"/>","description":"A basic accordion that shows one item at a time, open by default."},{"id":"accordion-multiple","title":"Multiple","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"notifications\",\n    title: \"Notification Settings\",\n    content:\n      \"Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.\",\n  },\n  {\n    value: \"privacy\",\n    title: \"Privacy & Security\",\n    content:\n      \"Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences.\",\n  },\n  {\n    value: \"billing\",\n    title: \"Billing & Subscription\",\n    content:\n      \"View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.\",\n  },\n];\n\n<Accordion items=items multiple defaultValue=[\"notifications\"] class=\"w-full max-w-md\"/>","description":"Pass `multiple` to allow more than one item to be open at the same time."},{"id":"accordion-disabled","title":"Disabled","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"item-1\",\n    title: \"Can I access my account history?\",\n    content:\n      \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"Premium feature information\",\n    content:\n      \"This section contains information about premium features. Upgrade your plan to access this content.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"How do I update my email address?\",\n    content:\n      \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n  },\n];\n\n<Accordion items=items collapsible disabled class=\"w-full max-w-md\"/>","description":"Pass `disabled` to disable every trigger in the accordion."},{"id":"accordion-borders","title":"Borders","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"billing\",\n    title: \"How does billing work?\",\n    content:\n      \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.\",\n  },\n  {\n    value: \"security\",\n    title: \"Is my data secure?\",\n    content:\n      \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.\",\n  },\n  {\n    value: \"integration\",\n    title: \"What integrations do you support?\",\n    content:\n      \"We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.\",\n  },\n];\n\n<Accordion\n  items=items\n  defaultValue=[\"billing\"]\n  class=\"max-w-lg rounded-lg border px-4 [&>[data-slot=accordion-item]]:border-b [&>[data-slot=accordion-item]]:last:border-b-0\"\n/>","description":"Add a border between items with a descendant selector on the root class."},{"id":"accordion-card","title":"Card","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\n\nstatic const items = [\n  {\n    value: \"plans\",\n    title: \"What subscription plans do you offer?\",\n    content:\n      \"We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.\",\n  },\n  {\n    value: \"billing\",\n    title: \"How does billing work?\",\n    content:\n      \"Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.\",\n  },\n  {\n    value: \"cancel\",\n    title: \"How do I cancel my subscription?\",\n    content:\n      \"You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.\",\n  },\n];\n\n<Card class=\"w-full max-w-sm\">\n  <CardHeader>\n    <CardTitle>Subscription & Billing</CardTitle>\n    <CardDescription>\n      Common questions about your account, plans, payments and cancellations.\n    </CardDescription>\n  </CardHeader>\n  <CardContent>\n    <Accordion items=items defaultValue=[\"plans\"]/>\n  </CardContent>\n</Card>","description":"Wrap the Accordion in a Card component."},{"id":"accordion-rtl","title":"RTL","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"item-1\",\n    title: \"كيف يمكنني إعادة تعيين كلمة المرور؟\",\n    content:\n      \"انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"هل يمكنني تغيير خطة الاشتراك الخاصة بي؟\",\n    content:\n      \"نعم، يمكنك ترقية أو تخفيض خطتك في أي وقت من إعدادات حسابك. ستظهر التغييرات في دورة الفوترة التالية.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"ما هي طرق الدفع التي تقبلونها؟\",\n    content:\n      \"نقبل جميع بطاقات الائتمان الرئيسية و PayPal والتحويلات المصرفية. تتم معالجة جميع المدفوعات بأمان من خلال شركاء الدفع لدينا.\",\n  },\n];\n\n<Accordion items=items defaultValue=[\"item-1\"] dir=\"rtl\" class=\"max-w-md\"/>","description":"Accordion restyles correctly under `dir=\"rtl\"` with no component changes."},{"id":"accordion-not-collapsible","title":"Not collapsible","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"item-1\",\n    title: \"Is it accessible?\",\n    content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"Is it styled?\",\n    content: \"Yes. It comes with default styles that match the other components' aesthetic.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"Is it animated?\",\n    content: \"Yes. It's animated by default, but you can disable it if you prefer.\",\n  },\n];\n\n<Accordion items=items collapsible=false defaultValue=[\"item-1\"] class=\"w-full max-w-md\"/>","description":"Without `collapsible`, the open item cannot be closed by clicking its own trigger."},{"id":"accordion-controlled","title":"Controlled","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\nstatic const items = [\n  {\n    value: \"item-1\",\n    title: \"Is it accessible?\",\n    content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n  },\n  {\n    value: \"item-2\",\n    title: \"Is it styled?\",\n    content: \"Yes. It comes with default styles that match the other components' aesthetic.\",\n  },\n  {\n    value: \"item-3\",\n    title: \"Is it animated?\",\n    content: \"Yes. It's animated by default, but you can disable it if you prefer.\",\n  },\n];\n\n<let/value=[\"item-1\"]/>\n\n<div class=\"w-full max-w-md\">\n  <p class=\"text-muted-foreground mb-4 text-sm\">\n    Open: ${value.join(\", \") || \"none\"}\n  </p>\n  <Accordion\n    items=items\n    value=value\n    valueChange(next) { value = next; }\n  />\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`.","essential":true},{"id":"accordion-compound","title":"Compound (attr tags)","source":"import Accordion from \"@marko-ui/shadcn/ui/accordion/accordion.marko\";\n\n<Accordion collapsible defaultValue=[\"item-1\"] class=\"w-full max-w-md\">\n  <@item value=\"item-1\" title=\"Is it accessible?\">\n    Yes. It adheres to the WAI-ARIA design pattern.\n  </@item>\n  <@item value=\"item-2\" title=\"Is it styled?\">\n    Yes. It comes with default styles that match the other components' aesthetic.\n  </@item>\n  <@item value=\"item-3\" title=\"Is it animated?\">\n    Yes. It's animated by default, but you can disable it if you prefer.\n  </@item>\n</Accordion>","description":"Use `<@item>` attribute tags instead of `items=` to compose each item's title and content directly in markup.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"param":"AccordionItem"},"nativeAttributes":"div","itemTypes":[{"prop":"items","typeName":"AccordionItem","fields":[{"name":"value","type":"string","required":true},{"name":"title","type":"string","required":true},{"name":"content","type":"string","required":false}]}],"composition":"Accordion renders its own item/trigger/content anatomy internally — there\nare no separate AccordionItem/AccordionTrigger/AccordionContent tags to\ncompose. Choose one of two equivalent forms:\n\n```text\nAccordion (items=)\n├── item 1 { value, title, content }\n├── item 2 { value, title, content }\n└── item 3 { value, title, content }\n```\n\n```text\nAccordion\n├── <@item value title>content</@item>\n├── <@item value title>content</@item>\n└── <@item value title>content</@item>\n```\n\nBoth sources are merged into one normalized item list before rendering, so\nthey may be mixed across an app but not within a single Accordion instance\n(attr tags win if both are present on the same tag)."}