{ "version": 1, "name": "Pluma Components", "description": "Compact manifest of Pluma component docs. For component work, start with this file to choose a component and its focused files. Read AI Guidelines first when present, then only the code, design, accessibility, API, or test helper Markdown needed for the task.", "files": { "text": { "title": "Markdown table of contents", "path": "/llms.txt", "url": "/llms.txt" }, "allDocs": { "title": "All docs manifest", "path": "/llms.json", "url": "/llms.json" }, "self": { "title": "Component docs manifest", "path": "/components.json", "url": "/components.json" } }, "components": [ { "title": "Drawer manager", "slug": "drawer-manager", "route": "/components/drawer-manager", "section": "components/overlays", "sectionTitle": "Overlays", "description": "Programmatic control of drawers", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-drawer-playground-manager--default", "github": "packages/components/src/-private/components/drawer-manager", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "searchTags": [ "Drawer" ], "files": { "index": "/components/drawer-manager.md", "overview": "/components/drawer-manager/overview.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/drawer-manager/code.md", "route": "/components/drawer-manager/code" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/-private/components/drawer-manager/drawer-manager.docs.mdx", "packages/components/src/-private/components/drawer-manager/docs/drawer-manager.code.docs.mdx" ] }, { "title": "Modal manager", "slug": "modal-manager", "route": "/components/modal-manager", "section": "components/overlays", "sectionTitle": "Overlays", "description": "Programmatic control of modals", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-modal-playground-manager--default", "github": "packages/components/src/-private/components/modal-manager", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "searchTags": [ "Modal" ], "files": { "index": "/components/modal-manager.md", "overview": "/components/modal-manager/overview.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/modal-manager/code.md", "route": "/components/modal-manager/code" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/-private/components/modal-manager/modal-manager.docs.mdx", "packages/components/src/-private/components/modal-manager/docs/modal-manager.code.docs.mdx" ] }, { "title": "React yield", "slug": "react-yield", "route": "/core/react-yield", "section": "core", "sectionTitle": "Advanced", "description": "Pass structured values to React children using Pluma's yield helper.", "files": { "index": "/core/react-yield.md", "tabs": [], "subPages": [] }, "sourcePaths": [ "packages/components/src/-private/components/yield/yield.docs.mdx" ] }, { "title": "Ember Floating UI", "slug": "ember-floating-ui", "route": "/core/ember-floating-ui", "section": "core", "sectionTitle": "Advanced", "description": "Position Ember overlays with Pluma's Floating UI helpers and interaction plugins.", "files": { "index": "/core/ember-floating-ui.md", "tabs": [], "subPages": [] }, "sourcePaths": [ "packages/components/src/-private/floating-ui/ember/floating-ui.docs.mdx" ] }, { "title": "Accordion", "slug": "accordion", "route": "/components/accordion", "section": "components/layout", "sectionTitle": "Layout", "description": "Accordion is a component that allows for the expansion and collapsing of content", "status": { "design": "in-progress", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-accordion-playground--default", "github": "packages/components/src/components/accordion" }, "searchTags": [ "Title", "Content" ], "files": { "index": "/components/accordion.md", "overview": "/components/accordion/overview.md", "api": "/components/accordion/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/accordion/code.md", "route": "/components/accordion/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/accordion/design.md", "route": "/components/accordion/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/accordion/test-helpers.md", "route": "/components/accordion/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/accordion/accordion.docs.mdx", "packages/components/src/components/accordion/docs/accordion.code.docs.mdx", "packages/components/src/components/accordion/docs/accordion.design.docs.mdx", "packages/components/src/components/accordion/docs/accordion.testHelpers.docs.mdx" ] }, { "title": "AccordionGroup", "slug": "accordion-group", "route": "/components/accordion-group", "section": "components/layout", "sectionTitle": "Layout", "description": "AccordionGroup is the wrapper component for Accordions. It allows for limiting open accordions and helps standardize styling.", "status": { "design": "in-progress", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-accordiongroup-playground--default", "github": "packages/components/src/components/accordion-group" }, "files": { "index": "/components/accordion-group.md", "overview": "/components/accordion-group/overview.md", "api": "/components/accordion-group/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/accordion-group/code.md", "route": "/components/accordion-group/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/accordion-group/design.md", "route": "/components/accordion-group/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/accordion-group/test-helpers.md", "route": "/components/accordion-group/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/accordion-group/accordion-group.docs.mdx", "packages/components/src/components/accordion-group/docs/accordion-group.code.docs.mdx", "packages/components/src/components/accordion-group/docs/accordion-group.design.docs.mdx", "packages/components/src/components/accordion-group/docs/accordion-group.testHelpers.docs.mdx" ] }, { "title": "AspectRatio", "slug": "aspect-ratio", "route": "/components/aspect-ratio", "section": "components/layout", "sectionTitle": "Layout", "description": "A utility component for constraining content to a fixed width-to-height ratio.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-aspectratio-playground--default", "github": "packages/components/src/components/aspect-ratio" }, "files": { "index": "/components/aspect-ratio.md", "overview": "/components/aspect-ratio/overview.md", "api": "/components/aspect-ratio/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/aspect-ratio/code.md", "route": "/components/aspect-ratio/code" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/aspect-ratio/aspect-ratio.docs.mdx", "packages/components/src/components/aspect-ratio/docs/aspect-ratio.code.docs.mdx" ] }, { "title": "Avatar", "slug": "avatar", "route": "/components/avatar", "section": "components/content", "sectionTitle": "Content", "description": "A component that displays a user's avatar, supporting images, Gravatar, and initials.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-avatar-playground--default", "github": "packages/components/src/components/avatar", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?m=auto&node-id=3393-4710" }, "files": { "index": "/components/avatar.md", "overview": "/components/avatar/overview.md", "api": "/components/avatar/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/avatar/code.md", "route": "/components/avatar/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/avatar/design.md", "route": "/components/avatar/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/avatar/test-helpers.md", "route": "/components/avatar/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/avatar/avatar.docs.mdx", "packages/components/src/components/avatar/docs/avatar.code.docs.mdx", "packages/components/src/components/avatar/docs/avatar.design.docs.mdx", "packages/components/src/components/avatar/docs/avatar.testHelpers.docs.mdx" ] }, { "title": "Badge", "slug": "badge", "route": "/components/badge", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Badges are read-only indicators used to communicate a category, metadata, a numeric quantity, or a process's current state.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-badge-playground--default", "github": "packages/components/src/components/badge", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=292-8676&mode=dev" }, "files": { "index": "/components/badge.md", "overview": "/components/badge/overview.md", "aiGuidelines": "/ai-guidelines/badge.md", "aiGuidelinesRoute": "/components/badge/ai-guidelines", "api": "/components/badge/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/badge/code.md", "route": "/components/badge/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/badge/design.md", "route": "/components/badge/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/badge/accessibility.md", "route": "/components/badge/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/badge/test-helpers.md", "route": "/components/badge/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/badge/badge.docs.mdx", "packages/components/src/components/badge/docs/badge.ai-guidelines.md", "packages/components/src/components/badge/docs/badge.code.docs.mdx", "packages/components/src/components/badge/docs/badge.design.docs.mdx", "packages/components/src/components/badge/docs/badge.a11y.docs.mdx", "packages/components/src/components/badge/docs/badge.testHelpers.docs.mdx" ] }, { "title": "Banner", "slug": "banner", "route": "/components/banner", "section": "components/feedback", "sectionTitle": "Feedback", "description": "Banners prominently communicate contextual information.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-banner-playground--default", "github": "packages/components/src/components/banner", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=356-12590&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/" }, "files": { "index": "/components/banner.md", "overview": "/components/banner/overview.md", "aiGuidelines": "/ai-guidelines/banner.md", "aiGuidelinesRoute": "/components/banner/ai-guidelines", "api": "/components/banner/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/banner/code.md", "route": "/components/banner/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/banner/design.md", "route": "/components/banner/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/banner/accessibility.md", "route": "/components/banner/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/banner/test-helpers.md", "route": "/components/banner/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/banner/banner.docs.mdx", "packages/components/src/components/banner/docs/banner.ai-guidelines.md", "packages/components/src/components/banner/docs/banner.code.docs.mdx", "packages/components/src/components/banner/docs/banner.design.docs.mdx", "packages/components/src/components/banner/docs/banner.a11y.docs.mdx", "packages/components/src/components/banner/docs/banner.testHelpers.docs.mdx" ] }, { "title": "Blanket", "slug": "blanket", "route": "/components/blanket", "section": "components/overlays", "sectionTitle": "Overlays", "description": "An overlay component that centers content, with an optional semi-transparent background.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done" }, "links": { "story": "components-blanket-playground--default", "github": "packages/components/src/components/blanket" }, "files": { "index": "/components/blanket.md", "overview": "/components/blanket/overview.md", "api": "/components/blanket/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/blanket/code.md", "route": "/components/blanket/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/blanket/design.md", "route": "/components/blanket/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/blanket/test-helpers.md", "route": "/components/blanket/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/blanket/blanket.docs.mdx", "packages/components/src/components/blanket/docs/blanket.code.docs.mdx", "packages/components/src/components/blanket/docs/blanket.design.docs.mdx", "packages/components/src/components/blanket/docs/blanket.testHelpers.docs.mdx" ] }, { "title": "Box", "slug": "box", "route": "/components/box", "section": "components/layout", "sectionTitle": "Layout", "description": "Base component for all Pluma components. All components in Pluma are built using the Box component. This means Pluma components all accept the Box component's props.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "github": "packages/components/src/components/box" }, "files": { "index": "/components/box.md", "overview": "/components/box/overview.md", "api": "/components/box/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/box/code.md", "route": "/components/box/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/box/design.md", "route": "/components/box/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/box/box.docs.mdx", "packages/components/src/components/box/docs/box.code.docs.mdx", "packages/components/src/components/box/docs/box.design.docs.mdx" ] }, { "title": "Breadcrumbs", "slug": "breadcrumbs", "route": "/components/breadcrumbs", "section": "components/navigation", "sectionTitle": "Navigation", "description": "Breadcrumbs provide information about a user's current location within the application's page hierarchy.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-breadcrumbs-playground--default", "github": "packages/components/src/components/breadcrumbs", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=20-968&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/" }, "files": { "index": "/components/breadcrumbs.md", "overview": "/components/breadcrumbs/overview.md", "aiGuidelines": "/ai-guidelines/breadcrumbs.md", "aiGuidelinesRoute": "/components/breadcrumbs/ai-guidelines", "api": "/components/breadcrumbs/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/breadcrumbs/code.md", "route": "/components/breadcrumbs/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/breadcrumbs/design.md", "route": "/components/breadcrumbs/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/breadcrumbs/accessibility.md", "route": "/components/breadcrumbs/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/breadcrumbs/test-helpers.md", "route": "/components/breadcrumbs/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/breadcrumbs/breadcrumbs.docs.mdx", "packages/components/src/components/breadcrumbs/docs/breadcrumbs.ai-guidelines.md", "packages/components/src/components/breadcrumbs/docs/breadcrumbs.code.docs.mdx", "packages/components/src/components/breadcrumbs/docs/breadcrumbs.design.docs.mdx", "packages/components/src/components/breadcrumbs/docs/breadcrumbs.a11y.docs.mdx", "packages/components/src/components/breadcrumbs/docs/breadcrumbs.testHelpers.docs.mdx" ] }, { "title": "Button", "slug": "button", "route": "/components/button", "section": "components/buttons", "sectionTitle": "Buttons", "description": "Buttons are interactive elements that allow the user to perform an action on the page or serve as a prominent hyperlink.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-button-playground--default", "github": "packages/components/src/components/button", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=0-1&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/button/" }, "files": { "index": "/components/button.md", "overview": "/components/button/overview.md", "aiGuidelines": "/ai-guidelines/button.md", "aiGuidelinesRoute": "/components/button/ai-guidelines", "api": "/components/button/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/button/code.md", "route": "/components/button/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/button/design.md", "route": "/components/button/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/button/accessibility.md", "route": "/components/button/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/button/test-helpers.md", "route": "/components/button/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/button/button.docs.mdx", "packages/components/src/components/button/docs/button.ai-guidelines.md", "packages/components/src/components/button/docs/button.code.docs.mdx", "packages/components/src/components/button/docs/button.design.docs.mdx", "packages/components/src/components/button/docs/button.a11y.docs.mdx", "packages/components/src/components/button/docs/button.testHelpers.docs.mdx" ] }, { "title": "ButtonGroup", "slug": "button-group", "route": "/components/button-group", "section": "components/buttons", "sectionTitle": "Buttons", "description": "The ButtonGroup component renders a group of related buttons next to each other.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-buttongroup-playground--default", "github": "packages/components/src/components/button-group", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=286-7810&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/button/" }, "files": { "index": "/components/button-group.md", "overview": "/components/button-group/overview.md", "aiGuidelines": "/ai-guidelines/button-group.md", "aiGuidelinesRoute": "/components/button-group/ai-guidelines", "api": "/components/button-group/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/button-group/code.md", "route": "/components/button-group/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/button-group/design.md", "route": "/components/button-group/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/button-group/accessibility.md", "route": "/components/button-group/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/button-group/test-helpers.md", "route": "/components/button-group/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/button-group/button-group.docs.mdx", "packages/components/src/components/button-group/docs/button-group.ai-guidelines.md", "packages/components/src/components/button-group/docs/button-group.code.docs.mdx", "packages/components/src/components/button-group/docs/button-group.design.docs.mdx", "packages/components/src/components/button-group/docs/button-group.a11y.docs.mdx", "packages/components/src/components/button-group/docs/button-group.testHelpers.docs.mdx" ] }, { "title": "Card", "slug": "card", "route": "/components/card", "section": "components/layout", "sectionTitle": "Layout", "description": "Card is a component for grouping similar content in a container.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-card-playground--default", "github": "packages/components/src/components/card" }, "searchTags": [ "Header", "Title", "Actions", "Section" ], "files": { "index": "/components/card.md", "overview": "/components/card/overview.md", "api": "/components/card/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/card/code.md", "route": "/components/card/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/card/design.md", "route": "/components/card/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/card/test-helpers.md", "route": "/components/card/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/card/card.docs.mdx", "packages/components/src/components/card/docs/card.code.docs.mdx", "packages/components/src/components/card/docs/card.design.docs.mdx", "packages/components/src/components/card/docs/card.testHelpers.docs.mdx" ] }, { "title": "CenterBaseline", "slug": "center-baseline", "route": "/components/center-baseline", "section": "components/layout", "sectionTitle": "Layout", "description": "Utility component for centering content vertically.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-centerbaseline-playground--default", "github": "packages/components/src/components/center-baseline" }, "files": { "index": "/components/center-baseline.md", "overview": "/components/center-baseline/overview.md", "api": "/components/center-baseline/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/center-baseline/code.md", "route": "/components/center-baseline/code" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/center-baseline/center-baseline.docs.mdx", "packages/components/src/components/center-baseline/docs/center-baseline.code.docs.mdx" ] }, { "title": "Chart", "slug": "chart", "route": "/data-visualization/chart", "section": "data-visualization", "sectionTitle": "Data visualization", "description": "Chart draws data as composable marks — lines, bars, areas and radial arcs — on shared, automatically laid out axes.", "status": { "design": "not-started", "react": "in-progress", "ember": "in-progress", "test": "in-progress", "docs": "in-progress", "testHelpers": "not-started" }, "links": { "story": "components-chart-playground--default", "github": "packages/components/src/components/chart" }, "searchTags": [ "line", "bar", "graph", "plot", "visualization", "dataviz", "series", "axis", "legend", "pie", "donut", "ring", "gauge", "arc", "radial", "sankey", "flow", "funnel", "export", "download", "png", "pdf", "csv" ], "files": { "index": "/data-visualization/chart.md", "overview": "/data-visualization/chart/overview.md", "api": "/data-visualization/chart/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/data-visualization/chart/code.md", "route": "/data-visualization/chart/code" }, { "value": "design", "title": "Design Guidelines", "path": "/data-visualization/chart/design.md", "route": "/data-visualization/chart/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/data-visualization/chart/test-helpers.md", "route": "/data-visualization/chart/test-helpers" } ], "subPages": [ { "slug": "marks", "title": "Marks", "path": "/data-visualization/chart/marks.md", "route": "/data-visualization/chart/marks" }, { "slug": "marks/line-and-area", "title": "Line and area", "path": "/data-visualization/chart/marks/line-and-area.md", "route": "/data-visualization/chart/marks/line-and-area" }, { "slug": "marks/bar", "title": "Bar", "path": "/data-visualization/chart/marks/bar.md", "route": "/data-visualization/chart/marks/bar" }, { "slug": "marks/sparkline", "title": "Sparkline", "path": "/data-visualization/chart/marks/sparkline.md", "route": "/data-visualization/chart/marks/sparkline" }, { "slug": "marks/dot", "title": "Dot", "path": "/data-visualization/chart/marks/dot.md", "route": "/data-visualization/chart/marks/dot" }, { "slug": "marks/arc", "title": "Arc", "path": "/data-visualization/chart/marks/arc.md", "route": "/data-visualization/chart/marks/arc" }, { "slug": "marks/sankey", "title": "Sankey", "path": "/data-visualization/chart/marks/sankey.md", "route": "/data-visualization/chart/marks/sankey" }, { "slug": "marks/reference-line", "title": "Reference line", "path": "/data-visualization/chart/marks/reference-line.md", "route": "/data-visualization/chart/marks/reference-line" }, { "slug": "axes", "title": "Axes", "path": "/data-visualization/chart/axes.md", "route": "/data-visualization/chart/axes" }, { "slug": "series-and-legend", "title": "Series and legend", "path": "/data-visualization/chart/series-and-legend.md", "route": "/data-visualization/chart/series-and-legend" }, { "slug": "interaction", "title": "Interaction", "path": "/data-visualization/chart/interaction.md", "route": "/data-visualization/chart/interaction" }, { "slug": "animation", "title": "Animation", "path": "/data-visualization/chart/animation.md", "route": "/data-visualization/chart/animation" }, { "slug": "exporting", "title": "Exporting", "path": "/data-visualization/chart/exporting.md", "route": "/data-visualization/chart/exporting" } ] }, "sourcePaths": [ "packages/components/src/components/chart/chart.docs.mdx", "packages/components/src/components/chart/docs/chart.code.docs.mdx", "packages/components/src/components/chart/docs/chart.design.docs.mdx", "packages/components/src/components/chart/docs/chart.testHelpers.docs.mdx", "packages/components/src/components/chart/docs/pages/marks.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/line-and-area.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/bar.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/sparkline.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/dot.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/arc.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/sankey.docs.mdx", "packages/components/src/components/chart/docs/pages/marks/reference-line.docs.mdx", "packages/components/src/components/chart/docs/pages/axes.docs.mdx", "packages/components/src/components/chart/docs/pages/series-and-legend.docs.mdx", "packages/components/src/components/chart/docs/pages/interaction.docs.mdx", "packages/components/src/components/chart/docs/pages/animation.docs.mdx", "packages/components/src/components/chart/docs/pages/exporting.docs.mdx" ] }, { "title": "Checkbox", "slug": "checkbox", "route": "/components/checkbox", "section": "components/forms", "sectionTitle": "Forms", "description": "Checkboxes allow users to select one or more items from a group of options.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-checkbox-playground--default", "github": "packages/components/src/components/checkbox", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=364-15188&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/" }, "files": { "index": "/components/checkbox.md", "overview": "/components/checkbox/overview.md", "aiGuidelines": "/ai-guidelines/checkbox.md", "aiGuidelinesRoute": "/components/checkbox/ai-guidelines", "api": "/components/checkbox/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/checkbox/code.md", "route": "/components/checkbox/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/checkbox/design.md", "route": "/components/checkbox/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/checkbox/accessibility.md", "route": "/components/checkbox/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/checkbox/test-helpers.md", "route": "/components/checkbox/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/checkbox/checkbox.docs.mdx", "packages/components/src/components/checkbox/docs/checkbox.ai-guidelines.md", "packages/components/src/components/checkbox/docs/checkbox.code.docs.mdx", "packages/components/src/components/checkbox/docs/checkbox.design.docs.mdx", "packages/components/src/components/checkbox/docs/checkbox.a11y.docs.mdx", "packages/components/src/components/checkbox/docs/checkbox.testHelpers.docs.mdx" ] }, { "title": "CheckboxGroup", "slug": "checkbox-group", "route": "/components/checkbox-group", "section": "components/forms", "sectionTitle": "Forms", "description": "The CheckboxGroup component is used for displaying a list of related options, in the form of Checkbox inputs, where multiple choices may be selected.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-checkboxgroup-playground--default", "github": "packages/components/src/components/checkbox-group", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=364-15188&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/" }, "files": { "index": "/components/checkbox-group.md", "overview": "/components/checkbox-group/overview.md", "api": "/components/checkbox-group/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/checkbox-group/code.md", "route": "/components/checkbox-group/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/checkbox-group/design.md", "route": "/components/checkbox-group/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/checkbox-group/test-helpers.md", "route": "/components/checkbox-group/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/checkbox-group/checkbox-group.docs.mdx", "packages/components/src/components/checkbox-group/docs/checkbox-group.code.docs.mdx", "packages/components/src/components/checkbox-group/docs/checkbox-group.design.docs.mdx", "packages/components/src/components/checkbox-group/docs/checkbox-group.testHelpers.docs.mdx" ] }, { "title": "CloseButton", "slug": "close-button", "route": "/components/close-button", "section": "components/buttons", "sectionTitle": "Buttons", "description": "CloseButton provides a standard close/dismiss button with an X icon for use in dialogs, modals, and other dismissible UI elements.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-closebutton-playground--default", "github": "packages/components/src/components/close-button", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/button/" }, "files": { "index": "/components/close-button.md", "overview": "/components/close-button/overview.md", "api": "/components/close-button/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/close-button/code.md", "route": "/components/close-button/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/close-button/design.md", "route": "/components/close-button/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/close-button/test-helpers.md", "route": "/components/close-button/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/close-button/close-button.docs.mdx", "packages/components/src/components/close-button/docs/close-button.code.docs.mdx", "packages/components/src/components/close-button/docs/close-button.design.docs.mdx", "packages/components/src/components/close-button/docs/close-button.testHelpers.docs.mdx" ] }, { "title": "Code", "slug": "code", "route": "/components/code", "section": "components/typography", "sectionTitle": "Typography", "description": "Code visually marks technical text in a monospace font family, alternate colors, and responsive font size.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-code-playground--default", "github": "packages/components/src/components/code" }, "files": { "index": "/components/code.md", "overview": "/components/code/overview.md", "aiGuidelines": "/ai-guidelines/code.md", "aiGuidelinesRoute": "/components/code/ai-guidelines", "api": "/components/code/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/code/code.md", "route": "/components/code/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/code/design.md", "route": "/components/code/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/code/accessibility.md", "route": "/components/code/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/code/test-helpers.md", "route": "/components/code/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/code/code.docs.mdx", "packages/components/src/components/code/docs/code.ai-guidelines.md", "packages/components/src/components/code/docs/code.code.docs.mdx", "packages/components/src/components/code/docs/code.design.docs.mdx", "packages/components/src/components/code/docs/code.a11y.docs.mdx", "packages/components/src/components/code/docs/code.testHelpers.docs.mdx" ] }, { "title": "CodeBlock", "slug": "code-block", "route": "/components/code-block", "section": "components/content", "sectionTitle": "Content", "description": "Displays a block of code with syntax highlighting.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-codeblock-playground--default", "github": "packages/components/src/components/code-block" }, "files": { "index": "/components/code-block.md", "overview": "/components/code-block/overview.md", "api": "/components/code-block/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/code-block/code.md", "route": "/components/code-block/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/code-block/design.md", "route": "/components/code-block/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/code-block/test-helpers.md", "route": "/components/code-block/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/code-block/code-block.docs.mdx", "packages/components/src/components/code-block/docs/code-block.code.docs.mdx", "packages/components/src/components/code-block/docs/code-block.design.docs.mdx", "packages/components/src/components/code-block/docs/code-block.testHelpers.docs.mdx" ] }, { "title": "Coin", "slug": "coin", "route": "/components/coin", "section": "components/content", "sectionTitle": "Content", "description": "A shaped container (circle or rounded square) of fixed size that frames an Icon, Image, or short text content.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-coin-playground--default", "github": "packages/components/src/components/coin" }, "files": { "index": "/components/coin.md", "overview": "/components/coin/overview.md", "api": "/components/coin/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/coin/code.md", "route": "/components/coin/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/coin/design.md", "route": "/components/coin/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/coin/test-helpers.md", "route": "/components/coin/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/coin/coin.docs.mdx", "packages/components/src/components/coin/docs/coin.code.docs.mdx", "packages/components/src/components/coin/docs/coin.design.docs.mdx", "packages/components/src/components/coin/docs/coin.testHelpers.docs.mdx" ] }, { "title": "ColorPicker", "slug": "color-picker", "route": "/components/color-picker", "section": "components/forms", "sectionTitle": "Forms", "description": "An HEX value color picker.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "in-progress", "testHelpers": "not-started" }, "links": { "story": "components-colorpicker-playground--default", "github": "packages/components/src/components/color-picker" }, "searchTags": [ "picker", "hex", "color", "hsl" ], "files": { "index": "/components/color-picker.md", "overview": "/components/color-picker/overview.md", "api": "/components/color-picker/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/color-picker/code.md", "route": "/components/color-picker/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/color-picker/design.md", "route": "/components/color-picker/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/color-picker/test-helpers.md", "route": "/components/color-picker/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/color-picker/color-picker.docs.mdx", "packages/components/src/components/color-picker/docs/color-picker.code.docs.mdx", "packages/components/src/components/color-picker/docs/color-picker.design.docs.mdx", "packages/components/src/components/color-picker/docs/color-picker.testHelpers.docs.mdx" ] }, { "title": "Combobox", "slug": "combobox", "route": "/components/combobox", "section": "components/forms", "sectionTitle": "Forms", "description": "A text input with a dropdown list of options.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-combobox-playground--default", "github": "packages/components/src/components/combobox", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" }, "files": { "index": "/components/combobox.md", "overview": "/components/combobox/overview.md", "api": "/components/combobox/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/combobox/code.md", "route": "/components/combobox/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/combobox/design.md", "route": "/components/combobox/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/combobox/test-helpers.md", "route": "/components/combobox/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/combobox/combobox.docs.mdx", "packages/components/src/components/combobox/docs/combobox.code.docs.mdx", "packages/components/src/components/combobox/docs/combobox.design.docs.mdx", "packages/components/src/components/combobox/docs/combobox.testHelpers.docs.mdx" ] }, { "title": "ConditionViewer", "slug": "condition-viewer", "route": "/components/condition-viewer", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "The ConditionViewer components render a read-only summary of a set of rules — one boxed sentence per rule, nested under the operator that combines them.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-conditionviewer-playground--default", "github": "packages/components/src/components/condition-viewer" }, "searchTags": [ "ConditionViewerItem", "ConditionViewerGroup", "ConditionViewerTerm", "ConditionViewerDetailList", "ConditionViewerDetail", "condition", "rule", "predicate", "criteria", "filter", "segment", "query builder" ], "files": { "index": "/components/condition-viewer.md", "overview": "/components/condition-viewer/overview.md", "aiGuidelines": "/ai-guidelines/condition-viewer.md", "aiGuidelinesRoute": "/components/condition-viewer/ai-guidelines", "api": "/components/condition-viewer/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/condition-viewer/code.md", "route": "/components/condition-viewer/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/condition-viewer/design.md", "route": "/components/condition-viewer/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/condition-viewer/accessibility.md", "route": "/components/condition-viewer/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/condition-viewer/test-helpers.md", "route": "/components/condition-viewer/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/condition-viewer/condition-viewer.docs.mdx", "packages/components/src/components/condition-viewer/docs/condition-viewer.ai-guidelines.md", "packages/components/src/components/condition-viewer/docs/condition-viewer.code.docs.mdx", "packages/components/src/components/condition-viewer/docs/condition-viewer.design.docs.mdx", "packages/components/src/components/condition-viewer/docs/condition-viewer.a11y.docs.mdx", "packages/components/src/components/condition-viewer/docs/condition-viewer.testHelpers.docs.mdx" ] }, { "title": "ConfirmationModal", "slug": "confirmation-modal", "route": "/components/confirmation-modal", "section": "components/overlays", "sectionTitle": "Overlays", "description": "Confirmation with confirm/cancel actions.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-confirmationmodal-playground--default", "github": "packages/components/src/components/confirmation-modal", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "searchTags": [ "Modal", "Dialog", "Confirm", "Alert" ], "files": { "index": "/components/confirmation-modal.md", "overview": "/components/confirmation-modal/overview.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/confirmation-modal/code.md", "route": "/components/confirmation-modal/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/confirmation-modal/design.md", "route": "/components/confirmation-modal/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/confirmation-modal/test-helpers.md", "route": "/components/confirmation-modal/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/confirmation-modal/confirmation-modal.docs.mdx", "packages/components/src/components/confirmation-modal/docs/confirmation-modal.code.docs.mdx", "packages/components/src/components/confirmation-modal/docs/confirmation-modal.design.docs.mdx", "packages/components/src/components/confirmation-modal/docs/confirmation-modal.testHelpers.docs.mdx" ] }, { "title": "DataTable", "slug": "data-table", "route": "/components/data-table", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "DataTable enables users to act upon complex datasets with a variety of features including filtering and sorting.", "status": { "design": "in-progress", "react": "in-progress", "ember": "in-progress", "test": "not-started", "docs": "in-progress", "testHelpers": "done" }, "links": { "story": "components-datatable-playground--default", "github": "packages/components/src/components/data-table", "figma": "https://www.figma.com/design/V4sQz0o1FePdr8DIgGxNXK/Pluma-Table-2025?node-id=60-13402&m=dev" }, "searchTags": [ "HeaderLeftSection", "RightSection", "HeaderColumnsMenu", "HeaderSortMenu", "Table", "Pagination" ], "files": { "index": "/components/data-table.md", "overview": "/components/data-table/overview.md", "aiGuidelines": "/ai-guidelines/data-table.md", "aiGuidelinesRoute": "/components/data-table/ai-guidelines", "api": "/components/data-table/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/data-table/code.md", "route": "/components/data-table/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/data-table/design.md", "route": "/components/data-table/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/data-table/accessibility.md", "route": "/components/data-table/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/data-table/test-helpers.md", "route": "/components/data-table/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/data-table/data-table.docs.mdx", "packages/components/src/components/data-table/docs/data-table.ai-guidelines.md", "packages/components/src/components/data-table/docs/data-table.code.docs.mdx", "packages/components/src/components/data-table/docs/data-table.design.docs.mdx", "packages/components/src/components/data-table/docs/data-table.a11y.docs.mdx", "packages/components/src/components/data-table/docs/data-table.testHelpers.docs.mdx" ] }, { "title": "DatePicker", "slug": "date-picker", "route": "/components/date-picker", "section": "components/forms", "sectionTitle": "Forms", "description": "An input component that allows selecting a date from a popup calendar.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-datepicker-playground--default", "github": "packages/components/src/components/date-picker", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=157-8277&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "files": { "index": "/components/date-picker.md", "overview": "/components/date-picker/overview.md", "api": "/components/date-picker/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/date-picker/code.md", "route": "/components/date-picker/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/date-picker/design.md", "route": "/components/date-picker/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/date-picker/test-helpers.md", "route": "/components/date-picker/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/date-picker/date-picker.docs.mdx", "packages/components/src/components/date-picker/docs/date-picker.code.docs.mdx", "packages/components/src/components/date-picker/docs/date-picker.design.docs.mdx", "packages/components/src/components/date-picker/docs/date-picker.testHelpers.docs.mdx" ] }, { "title": "DescriptionList", "slug": "description-list", "route": "/components/description-list", "section": "components/typography", "sectionTitle": "Typography", "description": "Organize and explain a group of terms and their descriptions.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-descriptionlist-playground--default", "github": "packages/components/src/components/description-list" }, "searchTags": [ "Term", "Details" ], "files": { "index": "/components/description-list.md", "overview": "/components/description-list/overview.md", "api": "/components/description-list/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/description-list/code.md", "route": "/components/description-list/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/description-list/design.md", "route": "/components/description-list/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/description-list/test-helpers.md", "route": "/components/description-list/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/description-list/description-list.docs.mdx", "packages/components/src/components/description-list/docs/description-list.code.docs.mdx", "packages/components/src/components/description-list/docs/description-list.design.docs.mdx", "packages/components/src/components/description-list/docs/description-list.testHelpers.docs.mdx" ] }, { "title": "Divider", "slug": "divider", "route": "/components/divider", "section": "components/layout", "sectionTitle": "Layout", "description": "A horizontal line that separates content.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-divider-playground--default", "github": "packages/components/src/components/divider" }, "files": { "index": "/components/divider.md", "overview": "/components/divider/overview.md", "api": "/components/divider/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/divider/code.md", "route": "/components/divider/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/divider/design.md", "route": "/components/divider/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/divider/test-helpers.md", "route": "/components/divider/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/divider/divider.docs.mdx", "packages/components/src/components/divider/docs/divider.code.docs.mdx", "packages/components/src/components/divider/docs/divider.design.docs.mdx", "packages/components/src/components/divider/docs/divider.testHelpers.docs.mdx" ] }, { "title": "Drawer", "slug": "drawer", "route": "/components/drawer", "section": "components/overlays", "sectionTitle": "Overlays", "description": "Control interaction flow with simple, extensible drawers.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-drawer-playground--default", "github": "packages/components/src/components/drawer", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?m=auto&node-id=2639-7&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "searchTags": [ "Header", "Title", "Body", "Footer", "Inset" ], "files": { "index": "/components/drawer.md", "overview": "/components/drawer/overview.md", "api": "/components/drawer/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/drawer/code.md", "route": "/components/drawer/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/drawer/design.md", "route": "/components/drawer/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/drawer/test-helpers.md", "route": "/components/drawer/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/drawer/drawer.docs.mdx", "packages/components/src/components/drawer/docs/drawer.code.docs.mdx", "packages/components/src/components/drawer/docs/drawer.design.docs.mdx", "packages/components/src/components/drawer/docs/drawer.testHelpers.docs.mdx" ] }, { "title": "DropdownMenu", "slug": "dropdown-menu", "route": "/components/dropdown-menu", "section": "components/buttons", "sectionTitle": "Buttons", "description": "A set of actions in a popover.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-dropdownmenu-playground--default", "github": "packages/components/src/components/dropdown-menu", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/" }, "searchTags": [ "Trigger", "Content", "Group", "Item", "TriggerButton", "CheckboxItem", "Footer", "Sub", "SubTrigger" ], "files": { "index": "/components/dropdown-menu.md", "overview": "/components/dropdown-menu/overview.md", "aiGuidelines": "/ai-guidelines/dropdown-menu.md", "aiGuidelinesRoute": "/components/dropdown-menu/ai-guidelines", "api": "/components/dropdown-menu/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/dropdown-menu/code.md", "route": "/components/dropdown-menu/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/dropdown-menu/design.md", "route": "/components/dropdown-menu/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/dropdown-menu/accessibility.md", "route": "/components/dropdown-menu/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/dropdown-menu/test-helpers.md", "route": "/components/dropdown-menu/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/dropdown-menu/dropdown-menu.docs.mdx", "packages/components/src/components/dropdown-menu/docs/dropdown-menu.ai-guidelines.md", "packages/components/src/components/dropdown-menu/docs/dropdown-menu.code.docs.mdx", "packages/components/src/components/dropdown-menu/docs/dropdown-menu.design.docs.mdx", "packages/components/src/components/dropdown-menu/docs/dropdown-menu.a11y.docs.mdx", "packages/components/src/components/dropdown-menu/docs/dropdown-menu.testHelpers.docs.mdx" ] }, { "title": "Emphasis", "slug": "emphasis", "route": "/components/emphasis", "section": "components/typography", "sectionTitle": "Typography", "description": "Marks text that has stress emphasis.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-emphasis-playground--default", "github": "packages/components/src/components/emphasis" }, "files": { "index": "/components/emphasis.md", "overview": "/components/emphasis/overview.md", "api": "/components/emphasis/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/emphasis/code.md", "route": "/components/emphasis/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/emphasis/design.md", "route": "/components/emphasis/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/emphasis/test-helpers.md", "route": "/components/emphasis/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/emphasis/emphasis.docs.mdx", "packages/components/src/components/emphasis/docs/emphasis.code.docs.mdx", "packages/components/src/components/emphasis/docs/emphasis.design.docs.mdx", "packages/components/src/components/emphasis/docs/emphasis.testHelpers.docs.mdx" ] }, { "title": "EmptyState", "slug": "empty-state", "route": "/components/empty-state", "section": "components/layout", "sectionTitle": "Layout", "description": "EmptyStates notify the user that the content area or page has no data.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-emptystate-playground--default", "github": "packages/components/src/components/empty-state" }, "searchTags": [ "Title", "Description", "Actions", "Footer", "Graphic" ], "files": { "index": "/components/empty-state.md", "overview": "/components/empty-state/overview.md", "aiGuidelines": "/ai-guidelines/empty-state.md", "aiGuidelinesRoute": "/components/empty-state/ai-guidelines", "api": "/components/empty-state/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/empty-state/code.md", "route": "/components/empty-state/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/empty-state/design.md", "route": "/components/empty-state/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/empty-state/accessibility.md", "route": "/components/empty-state/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/empty-state/test-helpers.md", "route": "/components/empty-state/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/empty-state/empty-state.docs.mdx", "packages/components/src/components/empty-state/docs/empty-state.ai-guidelines.md", "packages/components/src/components/empty-state/docs/empty-state.code.docs.mdx", "packages/components/src/components/empty-state/docs/empty-state.design.docs.mdx", "packages/components/src/components/empty-state/docs/empty-state.a11y.docs.mdx", "packages/components/src/components/empty-state/docs/empty-state.testHelpers.docs.mdx" ] }, { "title": "FileField", "slug": "file-field", "route": "/components/file-field", "section": "components/forms", "sectionTitle": "Forms", "description": "FileField lets people choose files from their device, either through a button or a drag-and-drop area.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-filefield-playground--default", "github": "packages/components/src/components/file-field" }, "files": { "index": "/components/file-field.md", "overview": "/components/file-field/overview.md", "api": "/components/file-field/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/file-field/code.md", "route": "/components/file-field/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/file-field/design.md", "route": "/components/file-field/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/file-field/test-helpers.md", "route": "/components/file-field/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/file-field/file-field.docs.mdx", "packages/components/src/components/file-field/docs/file-field.code.docs.mdx", "packages/components/src/components/file-field/docs/file-field.design.docs.mdx", "packages/components/src/components/file-field/docs/file-field.testHelpers.docs.mdx" ] }, { "title": "Filters", "slug": "filters", "route": "/components/filters", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "The Filters component is a versatile component that can be used to filter data based on user-defined criteria.", "status": { "design": "in-progress", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-filters-playground--default", "github": "packages/components/src/components/filters" }, "searchTags": [ "ActiveList", "AddButton", "ClearAllButton" ], "files": { "index": "/components/filters.md", "overview": "/components/filters/overview.md", "api": "/components/filters/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/filters/code.md", "route": "/components/filters/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/filters/design.md", "route": "/components/filters/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/filters/test-helpers.md", "route": "/components/filters/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/filters/filters.docs.mdx", "packages/components/src/components/filters/docs/filters.code.docs.mdx", "packages/components/src/components/filters/docs/filters.design.docs.mdx", "packages/components/src/components/filters/docs/filters.testHelpers.docs.mdx" ] }, { "title": "Flex", "slug": "flex", "route": "/components/flex", "section": "components/layout", "sectionTitle": "Layout", "description": "A utility component for creating flex containers.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-flex-playground--default", "github": "packages/components/src/components/flex" }, "files": { "index": "/components/flex.md", "overview": "/components/flex/overview.md", "api": "/components/flex/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/flex/code.md", "route": "/components/flex/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/flex/design.md", "route": "/components/flex/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/flex/flex.docs.mdx", "packages/components/src/components/flex/docs/flex.code.docs.mdx", "packages/components/src/components/flex/docs/flex.design.docs.mdx" ] }, { "title": "Form", "slug": "form", "route": "/components/form", "section": "components/forms", "sectionTitle": "Forms", "description": "A component to handle submitting forms.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-started", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-form-playground--default", "github": "packages/components/src/components/form" }, "files": { "index": "/components/form.md", "overview": "/components/form/overview.md", "aiGuidelines": "/ai-guidelines/form.md", "aiGuidelinesRoute": "/components/form/ai-guidelines", "api": "/components/form/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/form/code.md", "route": "/components/form/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/form/design.md", "route": "/components/form/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/form/accessibility.md", "route": "/components/form/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/form/test-helpers.md", "route": "/components/form/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/form/form.docs.mdx", "packages/components/src/components/form/docs/form.ai-guidelines.md", "packages/components/src/components/form/docs/form.code.docs.mdx", "packages/components/src/components/form/docs/form.design.docs.mdx", "packages/components/src/components/form/docs/form.a11y.docs.mdx", "packages/components/src/components/form/docs/form.testHelpers.docs.mdx" ] }, { "title": "FormLayout", "slug": "form-layout", "route": "/components/form-layout", "section": "components/layout", "sectionTitle": "Layout", "description": "A flexible layout component for arranging form elements with customizable spacing.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-formlayout-playground--default", "github": "packages/components/src/components/form-layout" }, "searchTags": [ "Group" ], "files": { "index": "/components/form-layout.md", "overview": "/components/form-layout/overview.md", "api": "/components/form-layout/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/form-layout/code.md", "route": "/components/form-layout/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/form-layout/design.md", "route": "/components/form-layout/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/form-layout/form-layout.docs.mdx", "packages/components/src/components/form-layout/docs/form-layout.code.docs.mdx", "packages/components/src/components/form-layout/docs/form-layout.design.docs.mdx" ] }, { "title": "FormattedDateTime", "slug": "formatted-date-time", "route": "/components/formatted-date-time", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Displays a date/time formatted in one of a number of predefined formats.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "in-progress", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-formatteddatetime-playground--default", "github": "packages/components/src/components/formatted-date-time" }, "files": { "index": "/components/formatted-date-time.md", "overview": "/components/formatted-date-time/overview.md", "api": "/components/formatted-date-time/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/formatted-date-time/code.md", "route": "/components/formatted-date-time/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/formatted-date-time/design.md", "route": "/components/formatted-date-time/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/formatted-date-time/test-helpers.md", "route": "/components/formatted-date-time/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/formatted-date-time/formatted-date-time.docs.mdx", "packages/components/src/components/formatted-date-time/docs/formatted-date-time.code.docs.mdx", "packages/components/src/components/formatted-date-time/docs/formatted-date-time.design.docs.mdx", "packages/components/src/components/formatted-date-time/docs/formatted-date-time.testHelpers.docs.mdx" ] }, { "title": "FormattedRelativeTime", "slug": "formatted-relative-time", "route": "/components/formatted-relative-time", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Displays a date/time in a human-readable format, relative to the current time.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-formattedrelativetime-playground--default", "github": "packages/components/src/components/formatted-relative-time" }, "files": { "index": "/components/formatted-relative-time.md", "overview": "/components/formatted-relative-time/overview.md", "api": "/components/formatted-relative-time/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/formatted-relative-time/code.md", "route": "/components/formatted-relative-time/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/formatted-relative-time/design.md", "route": "/components/formatted-relative-time/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/formatted-relative-time/test-helpers.md", "route": "/components/formatted-relative-time/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/formatted-relative-time/formatted-relative-time.docs.mdx", "packages/components/src/components/formatted-relative-time/docs/formatted-relative-time.code.docs.mdx", "packages/components/src/components/formatted-relative-time/docs/formatted-relative-time.design.docs.mdx", "packages/components/src/components/formatted-relative-time/docs/formatted-relative-time.testHelpers.docs.mdx" ] }, { "title": "Grid", "slug": "grid", "route": "/components/grid", "section": "components/layout", "sectionTitle": "Layout", "description": "A utility component for building CSS grid layouts.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-grid-playground--default", "github": "packages/components/src/components/grid" }, "files": { "index": "/components/grid.md", "overview": "/components/grid/overview.md", "api": "/components/grid/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/grid/code.md", "route": "/components/grid/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/grid/design.md", "route": "/components/grid/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/grid/grid.docs.mdx", "packages/components/src/components/grid/docs/grid.code.docs.mdx", "packages/components/src/components/grid/docs/grid.design.docs.mdx" ] }, { "title": "Heading", "slug": "heading", "route": "/components/heading", "section": "components/typography", "sectionTitle": "Typography", "description": "A styled, semantic heading element. The Heading component builds on top of Text and supports all Text props.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-heading-playground--default", "github": "packages/components/src/components/heading" }, "files": { "index": "/components/heading.md", "overview": "/components/heading/overview.md", "aiGuidelines": "/ai-guidelines/heading.md", "aiGuidelinesRoute": "/components/heading/ai-guidelines", "api": "/components/heading/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/heading/code.md", "route": "/components/heading/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/heading/design.md", "route": "/components/heading/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/heading/accessibility.md", "route": "/components/heading/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/heading/test-helpers.md", "route": "/components/heading/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/heading/heading.docs.mdx", "packages/components/src/components/heading/docs/heading.ai-guidelines.md", "packages/components/src/components/heading/docs/heading.code.docs.mdx", "packages/components/src/components/heading/docs/heading.design.docs.mdx", "packages/components/src/components/heading/docs/heading.a11y.docs.mdx", "packages/components/src/components/heading/docs/heading.testHelpers.docs.mdx" ] }, { "title": "Icon", "slug": "icon", "route": "/components/icon", "section": "components/content", "sectionTitle": "Content", "description": "Icons are scalable graphics used to visually enhance a user interface.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-icon-playground--default", "github": "packages/components/src/components/icon" }, "files": { "index": "/components/icon.md", "overview": "/components/icon/overview.md", "aiGuidelines": "/ai-guidelines/icon.md", "aiGuidelinesRoute": "/components/icon/ai-guidelines", "api": "/components/icon/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/icon/code.md", "route": "/components/icon/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/icon/design.md", "route": "/components/icon/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/icon/accessibility.md", "route": "/components/icon/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/icon/test-helpers.md", "route": "/components/icon/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/icon/icon.docs.mdx", "packages/components/src/components/icon/docs/icon.ai-guidelines.md", "packages/components/src/components/icon/docs/icon.code.docs.mdx", "packages/components/src/components/icon/docs/icon.design.docs.mdx", "packages/components/src/components/icon/docs/icon.a11y.docs.mdx", "packages/components/src/components/icon/docs/icon.testHelpers.docs.mdx" ] }, { "title": "Image", "slug": "image", "route": "/components/image", "section": "components/content", "sectionTitle": "Content", "description": "Images are used to display graphics and custom icons.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-image-playground--default", "github": "packages/components/src/components/image" }, "files": { "index": "/components/image.md", "overview": "/components/image/overview.md", "aiGuidelines": "/ai-guidelines/image.md", "aiGuidelinesRoute": "/components/image/ai-guidelines", "api": "/components/image/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/image/code.md", "route": "/components/image/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/image/design.md", "route": "/components/image/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/image/accessibility.md", "route": "/components/image/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/image/test-helpers.md", "route": "/components/image/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/image/image.docs.mdx", "packages/components/src/components/image/docs/image.ai-guidelines.md", "packages/components/src/components/image/docs/image.code.docs.mdx", "packages/components/src/components/image/docs/image.design.docs.mdx", "packages/components/src/components/image/docs/image.a11y.docs.mdx", "packages/components/src/components/image/docs/image.testHelpers.docs.mdx" ] }, { "title": "InlineStack", "slug": "inline-stack", "route": "/components/inline-stack", "section": "components/layout", "sectionTitle": "Layout", "description": "A utility component for creating horizontal flex containers.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-inlinestack-playground--default", "github": "packages/components/src/components/inline-stack" }, "files": { "index": "/components/inline-stack.md", "overview": "/components/inline-stack/overview.md", "api": "/components/inline-stack/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/inline-stack/code.md", "route": "/components/inline-stack/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/inline-stack/design.md", "route": "/components/inline-stack/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/inline-stack/inline-stack.docs.mdx", "packages/components/src/components/inline-stack/docs/inline-stack.code.docs.mdx", "packages/components/src/components/inline-stack/docs/inline-stack.design.docs.mdx" ] }, { "title": "JsonField", "slug": "json-field", "route": "/components/json-field", "section": "components/forms", "sectionTitle": "Forms", "description": "A textarea component for JSON input", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-jsonfield-playground--default", "github": "packages/components/src/components/json-field" }, "files": { "index": "/components/json-field.md", "overview": "/components/json-field/overview.md", "api": "/components/json-field/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/json-field/code.md", "route": "/components/json-field/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/json-field/design.md", "route": "/components/json-field/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/json-field/test-helpers.md", "route": "/components/json-field/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/json-field/json-field.docs.mdx", "packages/components/src/components/json-field/docs/json-field.code.docs.mdx", "packages/components/src/components/json-field/docs/json-field.design.docs.mdx", "packages/components/src/components/json-field/docs/json-field.testHelpers.docs.mdx" ] }, { "title": "KeyboardShortcut", "slug": "keyboard-shortcut", "route": "/components/keyboard-shortcut", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Displays keyboard shortcuts with platform-aware formatting.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-keyboardshortcut-playground--default", "github": "packages/components/src/components/keyboard-shortcut", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?node-id=4502-3645&m=dev" }, "files": { "index": "/components/keyboard-shortcut.md", "overview": "/components/keyboard-shortcut/overview.md", "api": "/components/keyboard-shortcut/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/keyboard-shortcut/code.md", "route": "/components/keyboard-shortcut/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/keyboard-shortcut/design.md", "route": "/components/keyboard-shortcut/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/keyboard-shortcut/test-helpers.md", "route": "/components/keyboard-shortcut/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/keyboard-shortcut/keyboard-shortcut.docs.mdx", "packages/components/src/components/keyboard-shortcut/docs/keyboard-shortcut.code.docs.mdx", "packages/components/src/components/keyboard-shortcut/docs/keyboard-shortcut.design.docs.mdx", "packages/components/src/components/keyboard-shortcut/docs/keyboard-shortcut.testHelpers.docs.mdx" ] }, { "title": "Link", "slug": "link", "route": "/components/link", "section": "components/navigation", "sectionTitle": "Navigation", "description": "Links are used to navigate to a new location, open or download an asset, or serve as an inline action.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-link-playground--default", "github": "packages/components/src/components/link", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=20-674&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/link/" }, "files": { "index": "/components/link.md", "overview": "/components/link/overview.md", "aiGuidelines": "/ai-guidelines/link.md", "aiGuidelinesRoute": "/components/link/ai-guidelines", "api": "/components/link/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/link/code.md", "route": "/components/link/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/link/design.md", "route": "/components/link/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/link/accessibility.md", "route": "/components/link/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/link/test-helpers.md", "route": "/components/link/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/link/link.docs.mdx", "packages/components/src/components/link/docs/link.ai-guidelines.md", "packages/components/src/components/link/docs/link.code.docs.mdx", "packages/components/src/components/link/docs/link.design.docs.mdx", "packages/components/src/components/link/docs/link.a11y.docs.mdx", "packages/components/src/components/link/docs/link.testHelpers.docs.mdx" ] }, { "title": "List", "slug": "list", "route": "/components/list", "section": "components/typography", "sectionTitle": "Typography", "description": "List a group of text-only content.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-list-playground--default", "github": "packages/components/src/components/list" }, "searchTags": [ "Item" ], "files": { "index": "/components/list.md", "overview": "/components/list/overview.md", "api": "/components/list/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/list/code.md", "route": "/components/list/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/list/design.md", "route": "/components/list/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/list/test-helpers.md", "route": "/components/list/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/list/list.docs.mdx", "packages/components/src/components/list/docs/list.code.docs.mdx", "packages/components/src/components/list/docs/list.design.docs.mdx", "packages/components/src/components/list/docs/list.testHelpers.docs.mdx" ] }, { "title": "Modal", "slug": "modal", "route": "/components/modal", "section": "components/overlays", "sectionTitle": "Overlays", "description": "Modals are dialogs displayed over inert content that allow users to complete a singular, focused task without leaving the page.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "in-progress" }, "links": { "story": "components-modal-playground--default", "github": "packages/components/src/components/modal", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=371-98&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "searchTags": [ "Header", "Title", "Body", "Footer", "Inset" ], "files": { "index": "/components/modal.md", "overview": "/components/modal/overview.md", "aiGuidelines": "/ai-guidelines/modal.md", "aiGuidelinesRoute": "/components/modal/ai-guidelines", "api": "/components/modal/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/modal/code.md", "route": "/components/modal/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/modal/design.md", "route": "/components/modal/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/modal/accessibility.md", "route": "/components/modal/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/modal/test-helpers.md", "route": "/components/modal/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/modal/modal.docs.mdx", "packages/components/src/components/modal/docs/modal.ai-guidelines.md", "packages/components/src/components/modal/docs/modal.code.docs.mdx", "packages/components/src/components/modal/docs/modal.design.docs.mdx", "packages/components/src/components/modal/docs/modal.a11y.docs.mdx", "packages/components/src/components/modal/docs/modal.testHelpers.docs.mdx" ] }, { "title": "NavItem", "slug": "nav-item", "route": "/components/nav-item", "section": "components/navigation", "sectionTitle": "Navigation", "description": "A component to display a navigation button in a sidebar.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-started", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-navitem-playground--default", "github": "packages/components/src/components/nav-item", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?node-id=4592-68410&m=dev" }, "files": { "index": "/components/nav-item.md", "overview": "/components/nav-item/overview.md", "api": "/components/nav-item/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/nav-item/code.md", "route": "/components/nav-item/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/nav-item/design.md", "route": "/components/nav-item/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/nav-item/test-helpers.md", "route": "/components/nav-item/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/nav-item/nav-item.docs.mdx", "packages/components/src/components/nav-item/docs/nav-item.code.docs.mdx", "packages/components/src/components/nav-item/docs/nav-item.design.docs.mdx", "packages/components/src/components/nav-item/docs/nav-item.testHelpers.docs.mdx" ] }, { "title": "NumberField", "slug": "number-field", "route": "/components/number-field", "section": "components/forms", "sectionTitle": "Forms", "description": "A numeric input field with increment/decrement controls, value clamping, and keyboard support.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-numberfield-playground--default", "github": "packages/components/src/components/number-field" }, "relatedComponents": [ "TextField", "Slider" ], "files": { "index": "/components/number-field.md", "overview": "/components/number-field/overview.md", "api": "/components/number-field/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/number-field/code.md", "route": "/components/number-field/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/number-field/design.md", "route": "/components/number-field/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/number-field/test-helpers.md", "route": "/components/number-field/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/number-field/number-field.docs.mdx", "packages/components/src/components/number-field/docs/number-field.code.docs.mdx", "packages/components/src/components/number-field/docs/number-field.design.docs.mdx", "packages/components/src/components/number-field/docs/number-field.testHelpers.docs.mdx" ] }, { "title": "OptionCard", "slug": "option-card", "route": "/components/option-card", "section": "components/forms", "sectionTitle": "Forms", "description": "OptionCards present the functionality of a radio or checkbox in a more visually prominent card format with an increased click area.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-optioncard-playground--default", "github": "packages/components/src/components/option-card", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=371-97&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/" }, "files": { "index": "/components/option-card.md", "overview": "/components/option-card/overview.md", "aiGuidelines": "/ai-guidelines/option-card.md", "aiGuidelinesRoute": "/components/option-card/ai-guidelines", "api": "/components/option-card/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/option-card/code.md", "route": "/components/option-card/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/option-card/design.md", "route": "/components/option-card/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/option-card/accessibility.md", "route": "/components/option-card/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/option-card/test-helpers.md", "route": "/components/option-card/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/option-card/option-card.docs.mdx", "packages/components/src/components/option-card/docs/option-card.ai-guidelines.md", "packages/components/src/components/option-card/docs/option-card.code.docs.mdx", "packages/components/src/components/option-card/docs/option-card.design.docs.mdx", "packages/components/src/components/option-card/docs/option-card.a11y.docs.mdx", "packages/components/src/components/option-card/docs/option-card.testHelpers.docs.mdx" ] }, { "title": "OptionCardGroup", "slug": "option-card-group", "route": "/components/option-card-group", "section": "components/forms", "sectionTitle": "Forms", "description": "A wrapper for OptionCard components.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-optioncardgroup-playground--radios", "github": "packages/components/src/components/option-card-group", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=371-97&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/" }, "files": { "index": "/components/option-card-group.md", "overview": "/components/option-card-group/overview.md", "api": "/components/option-card-group/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/option-card-group/code.md", "route": "/components/option-card-group/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/option-card-group/design.md", "route": "/components/option-card-group/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/option-card-group/test-helpers.md", "route": "/components/option-card-group/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/option-card-group/option-card-group.docs.mdx", "packages/components/src/components/option-card-group/docs/option-card-group.code.docs.mdx", "packages/components/src/components/option-card-group/docs/option-card-group.design.docs.mdx", "packages/components/src/components/option-card-group/docs/option-card-group.testHelpers.docs.mdx" ] }, { "title": "Page", "slug": "page", "route": "/components/page", "section": "components/navigation", "sectionTitle": "Navigation", "description": "Page is the outermost layout for a route, setting where the title and page-level actions sit and how wide the content column is.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-page-playground--default", "github": "packages/components/src/components/page", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?node-id=3571-4148&p=f" }, "searchTags": [ "Header", "HeaderTitle", "HeaderTitleAction", "HeaderActions", "HeaderDescription", "HeaderTabs", "HeaderExtra", "Section", "Body", "Rail", "Breadcrumbs", "wizard", "aside", "sidebar", "sticky" ], "files": { "index": "/components/page.md", "overview": "/components/page/overview.md", "api": "/components/page/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/page/code.md", "route": "/components/page/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/page/design.md", "route": "/components/page/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/page/test-helpers.md", "route": "/components/page/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/page/page.docs.mdx", "packages/components/src/components/page/docs/page.code.docs.mdx", "packages/components/src/components/page/docs/page.design.docs.mdx", "packages/components/src/components/page/docs/page.testHelpers.docs.mdx" ] }, { "title": "PageLoader", "slug": "page-loader", "route": "/components/page-loader", "section": "components/feedback", "sectionTitle": "Feedback", "description": "PageLoader communicates that a process is currently running on a page-level context.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-pageloader-playground--default", "github": "packages/components/src/components/page-loader", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/meter/" }, "files": { "index": "/components/page-loader.md", "overview": "/components/page-loader/overview.md", "aiGuidelines": "/ai-guidelines/page-loader.md", "aiGuidelinesRoute": "/components/page-loader/ai-guidelines", "api": "/components/page-loader/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/page-loader/code.md", "route": "/components/page-loader/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/page-loader/design.md", "route": "/components/page-loader/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/page-loader/accessibility.md", "route": "/components/page-loader/accessibility" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/page-loader/page-loader.docs.mdx", "packages/components/src/components/page-loader/docs/page-loader.ai-guidelines.md", "packages/components/src/components/page-loader/docs/page-loader.code.docs.mdx", "packages/components/src/components/page-loader/docs/page-loader.design.docs.mdx", "packages/components/src/components/page-loader/docs/page-loader.a11y.docs.mdx" ] }, { "title": "Pagination", "slug": "pagination", "route": "/components/pagination", "section": "components/navigation", "sectionTitle": "Navigation", "description": "A navigation component for moving through paginated content.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-pagination-playground--default", "github": "packages/components/src/components/pagination", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=397-6082&mode=dev" }, "files": { "index": "/components/pagination.md", "overview": "/components/pagination/overview.md", "api": "/components/pagination/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/pagination/code.md", "route": "/components/pagination/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/pagination/design.md", "route": "/components/pagination/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/pagination/test-helpers.md", "route": "/components/pagination/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/pagination/pagination.docs.mdx", "packages/components/src/components/pagination/docs/pagination.code.docs.mdx", "packages/components/src/components/pagination/docs/pagination.design.docs.mdx", "packages/components/src/components/pagination/docs/pagination.testHelpers.docs.mdx" ] }, { "title": "Panel", "slug": "panel", "route": "/components/panel", "section": "components/layout", "sectionTitle": "Layout", "description": "A Panel wraps related content, sometimes separated by borders, within a minimally-styled container.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-panel-playground--default", "github": "packages/components/src/components/panel", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=371-96&mode=dev" }, "searchTags": [ "Description", "Footer", "Title", "Header", "Section", "Inset", "Actions" ], "files": { "index": "/components/panel.md", "overview": "/components/panel/overview.md", "aiGuidelines": "/ai-guidelines/panel.md", "aiGuidelinesRoute": "/components/panel/ai-guidelines", "api": "/components/panel/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/panel/code.md", "route": "/components/panel/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/panel/design.md", "route": "/components/panel/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/panel/accessibility.md", "route": "/components/panel/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/panel/test-helpers.md", "route": "/components/panel/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/panel/panel.docs.mdx", "packages/components/src/components/panel/docs/panel.ai-guidelines.md", "packages/components/src/components/panel/docs/panel.code.docs.mdx", "packages/components/src/components/panel/docs/panel.design.docs.mdx", "packages/components/src/components/panel/docs/panel.a11y.docs.mdx", "packages/components/src/components/panel/docs/panel.testHelpers.docs.mdx" ] }, { "title": "Paragraph", "slug": "paragraph", "route": "/components/paragraph", "section": "components/typography", "sectionTitle": "Typography", "description": "Paragraph, meant to represent the paragraph element, is a typography component built on top of Text.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-paragraph-playground--default", "github": "packages/components/src/components/paragraph" }, "files": { "index": "/components/paragraph.md", "overview": "/components/paragraph/overview.md", "aiGuidelines": "/ai-guidelines/paragraph.md", "aiGuidelinesRoute": "/components/paragraph/ai-guidelines", "api": "/components/paragraph/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/paragraph/code.md", "route": "/components/paragraph/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/paragraph/design.md", "route": "/components/paragraph/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/paragraph/accessibility.md", "route": "/components/paragraph/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/paragraph/test-helpers.md", "route": "/components/paragraph/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/paragraph/paragraph.docs.mdx", "packages/components/src/components/paragraph/docs/paragraph.ai-guidelines.md", "packages/components/src/components/paragraph/docs/paragraph.code.docs.mdx", "packages/components/src/components/paragraph/docs/paragraph.design.docs.mdx", "packages/components/src/components/paragraph/docs/paragraph.a11y.docs.mdx", "packages/components/src/components/paragraph/docs/paragraph.testHelpers.docs.mdx" ] }, { "title": "PlainButton", "slug": "plain-button", "route": "/components/plain-button", "section": "components/buttons", "sectionTitle": "Buttons", "description": "The PlainButton is a foundational component with minimal styling used to build other button components in Pluma.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "github": "packages/components/src/components/plain-button", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/button/" }, "files": { "index": "/components/plain-button.md", "overview": "/components/plain-button/overview.md", "aiGuidelines": "/ai-guidelines/plain-button.md", "aiGuidelinesRoute": "/components/plain-button/ai-guidelines", "api": "/components/plain-button/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/plain-button/code.md", "route": "/components/plain-button/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/plain-button/design.md", "route": "/components/plain-button/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/plain-button/accessibility.md", "route": "/components/plain-button/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/plain-button/test-helpers.md", "route": "/components/plain-button/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/plain-button/plain-button.docs.mdx", "packages/components/src/components/plain-button/docs/plain-button.ai-guidelines.md", "packages/components/src/components/plain-button/docs/plain-button.code.docs.mdx", "packages/components/src/components/plain-button/docs/plain-button.design.docs.mdx", "packages/components/src/components/plain-button/docs/plain-button.a11y.docs.mdx", "packages/components/src/components/plain-button/docs/plain-button.testHelpers.docs.mdx" ] }, { "title": "PlainLink", "slug": "plain-link", "route": "/components/plain-link", "section": "components/navigation", "sectionTitle": "Navigation", "description": "The PlainLink is a foundational component with minimal styling used to build other link components in Pluma.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "github": "packages/components/src/components/plain-link", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/link/" }, "files": { "index": "/components/plain-link.md", "overview": "/components/plain-link/overview.md", "aiGuidelines": "/ai-guidelines/plain-link.md", "aiGuidelinesRoute": "/components/plain-link/ai-guidelines", "api": "/components/plain-link/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/plain-link/code.md", "route": "/components/plain-link/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/plain-link/design.md", "route": "/components/plain-link/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/plain-link/accessibility.md", "route": "/components/plain-link/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/plain-link/test-helpers.md", "route": "/components/plain-link/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/plain-link/plain-link.docs.mdx", "packages/components/src/components/plain-link/docs/plain-link.ai-guidelines.md", "packages/components/src/components/plain-link/docs/plain-link.code.docs.mdx", "packages/components/src/components/plain-link/docs/plain-link.design.docs.mdx", "packages/components/src/components/plain-link/docs/plain-link.a11y.docs.mdx", "packages/components/src/components/plain-link/docs/plain-link.testHelpers.docs.mdx" ] }, { "title": "PlainModal", "slug": "plain-modal", "route": "/core/plain-modal", "section": "core", "sectionTitle": "Advanced", "description": "PlainModal is a low-level component that provides the basic structure for a modal.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-plainmodal-playground--default", "github": "packages/components/src/components/plain-modal", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "files": { "index": "/core/plain-modal.md", "overview": "/core/plain-modal/overview.md", "api": "/core/plain-modal/api.md", "tabs": [], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/plain-modal/plain-modal.docs.mdx" ] }, { "title": "PlainPopover", "slug": "plain-popover", "route": "/core/plain-popover", "section": "core", "sectionTitle": "Advanced", "description": "A primitive for building popovers. Used only within other Pluma components.", "status": { "design": "done", "react": "done", "ember": "done", "test": "in-progress", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-plainpopover-playground--default", "github": "packages/components/src/components/plain-popover", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "files": { "index": "/core/plain-popover.md", "overview": "/core/plain-popover/overview.md", "api": "/core/plain-popover/api.md", "tabs": [], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/plain-popover/plain-popover.docs.mdx" ] }, { "title": "PlumaProvider", "slug": "pluma-provider", "route": "/core/pluma-provider", "section": "core", "sectionTitle": "Advanced", "description": "Configure the provider that supplies themes, icons, routing, and app-level Pluma behavior.", "files": { "index": "/core/pluma-provider.md", "overview": "/core/pluma-provider/overview.md", "api": "/core/pluma-provider/api.md", "tabs": [], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/pluma-provider/pluma-provider.docs.mdx" ] }, { "title": "Popover", "slug": "popover", "route": "/components/popover", "section": "components/overlays", "sectionTitle": "Overlays", "description": "Popovers are floating overlays that contain additional information or interactive content.", "status": { "design": "done", "react": "done", "ember": "done", "test": "in-progress", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-popover-playground--default", "github": "packages/components/src/components/popover", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=398-10637&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" }, "searchTags": [ "Trigger", "TriggerButton", "Content" ], "files": { "index": "/components/popover.md", "overview": "/components/popover/overview.md", "aiGuidelines": "/ai-guidelines/popover.md", "aiGuidelinesRoute": "/components/popover/ai-guidelines", "api": "/components/popover/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/popover/code.md", "route": "/components/popover/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/popover/design.md", "route": "/components/popover/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/popover/accessibility.md", "route": "/components/popover/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/popover/test-helpers.md", "route": "/components/popover/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/popover/popover.docs.mdx", "packages/components/src/components/popover/docs/popover.ai-guidelines.md", "packages/components/src/components/popover/docs/popover.code.docs.mdx", "packages/components/src/components/popover/docs/popover.design.docs.mdx", "packages/components/src/components/popover/docs/popover.a11y.docs.mdx", "packages/components/src/components/popover/docs/popover.testHelpers.docs.mdx" ] }, { "title": "Portal", "slug": "portal", "route": "/core/portal", "section": "core", "sectionTitle": "Advanced", "description": "Render overlay content outside the current DOM hierarchy.", "files": { "index": "/core/portal.md", "tabs": [], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/portal/portal.docs.mdx" ] }, { "title": "ProgressBar", "slug": "progress-bar", "route": "/components/progress-bar", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "A progress bar component that can be used to show the progress of a task.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-progressbar-playground--default", "github": "packages/components/src/components/progress-bar", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/meter/" }, "files": { "index": "/components/progress-bar.md", "overview": "/components/progress-bar/overview.md", "api": "/components/progress-bar/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/progress-bar/code.md", "route": "/components/progress-bar/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/progress-bar/design.md", "route": "/components/progress-bar/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/progress-bar/test-helpers.md", "route": "/components/progress-bar/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/progress-bar/progress-bar.docs.mdx", "packages/components/src/components/progress-bar/docs/progress-bar.code.docs.mdx", "packages/components/src/components/progress-bar/docs/progress-bar.design.docs.mdx", "packages/components/src/components/progress-bar/docs/progress-bar.testHelpers.docs.mdx" ] }, { "title": "ProgressCircle", "slug": "progress-circle", "route": "/components/progress-circle", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "A circular progress indicator that visually represents the completion of a task or process.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-progresscircle-playground--default", "github": "packages/components/src/components/progress-circle", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/meter/" }, "files": { "index": "/components/progress-circle.md", "overview": "/components/progress-circle/overview.md", "api": "/components/progress-circle/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/progress-circle/code.md", "route": "/components/progress-circle/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/progress-circle/design.md", "route": "/components/progress-circle/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/progress-circle/test-helpers.md", "route": "/components/progress-circle/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/progress-circle/progress-circle.docs.mdx", "packages/components/src/components/progress-circle/docs/progress-circle.code.docs.mdx", "packages/components/src/components/progress-circle/docs/progress-circle.design.docs.mdx", "packages/components/src/components/progress-circle/docs/progress-circle.testHelpers.docs.mdx" ] }, { "title": "Radio", "slug": "radio", "route": "/components/radio", "section": "components/forms", "sectionTitle": "Forms", "description": "The Radio form control allows for selection of one option from a group.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-radio-playground--default", "github": "packages/components/src/components/radio", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=364-15189&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/" }, "files": { "index": "/components/radio.md", "overview": "/components/radio/overview.md", "aiGuidelines": "/ai-guidelines/radio.md", "aiGuidelinesRoute": "/components/radio/ai-guidelines", "api": "/components/radio/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/radio/code.md", "route": "/components/radio/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/radio/design.md", "route": "/components/radio/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/radio/accessibility.md", "route": "/components/radio/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/radio/test-helpers.md", "route": "/components/radio/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/radio/radio.docs.mdx", "packages/components/src/components/radio/docs/radio.ai-guidelines.md", "packages/components/src/components/radio/docs/radio.code.docs.mdx", "packages/components/src/components/radio/docs/radio.design.docs.mdx", "packages/components/src/components/radio/docs/radio.a11y.docs.mdx", "packages/components/src/components/radio/docs/radio.testHelpers.docs.mdx" ] }, { "title": "RadioGroup", "slug": "radio-group", "route": "/components/radio-group", "section": "components/forms", "sectionTitle": "Forms", "description": "The RadioGroup component is used for displaying a list of related options, in the form of Radio inputs, where only one choice can be selected.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-radiogroup-playground--default", "github": "packages/components/src/components/radio-group", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=364-15189&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/" }, "files": { "index": "/components/radio-group.md", "overview": "/components/radio-group/overview.md", "api": "/components/radio-group/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/radio-group/code.md", "route": "/components/radio-group/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/radio-group/design.md", "route": "/components/radio-group/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/radio-group/test-helpers.md", "route": "/components/radio-group/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/radio-group/radio-group.docs.mdx", "packages/components/src/components/radio-group/docs/radio-group.code.docs.mdx", "packages/components/src/components/radio-group/docs/radio-group.design.docs.mdx", "packages/components/src/components/radio-group/docs/radio-group.testHelpers.docs.mdx" ] }, { "title": "Scrollable", "slug": "scrollable", "route": "/components/scrollable", "section": "components/layout", "sectionTitle": "Layout", "description": "Scrollable is a utility component that provides a scrollable container with configurable overflow behavior and edge detection capabilities.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-scrollable-playground--default", "github": "packages/components/src/components/scrollable" }, "files": { "index": "/components/scrollable.md", "overview": "/components/scrollable/overview.md", "api": "/components/scrollable/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/scrollable/code.md", "route": "/components/scrollable/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/scrollable/design.md", "route": "/components/scrollable/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/scrollable/scrollable.docs.mdx", "packages/components/src/components/scrollable/docs/scrollable.code.docs.mdx", "packages/components/src/components/scrollable/docs/scrollable.design.docs.mdx" ] }, { "title": "Search", "slug": "search", "route": "/components/search", "section": "components/forms", "sectionTitle": "Forms", "description": "The PlumaSearch component builds upon the TextField component, providing additional functionality tailored for search use cases.", "status": { "design": "done", "react": "done", "ember": "done", "test": "in-progress", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-search-playground--default", "github": "packages/components/src/components/search", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?m=auto&node-id=3164-9442&mode=dev" }, "files": { "index": "/components/search.md", "overview": "/components/search/overview.md", "api": "/components/search/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/search/code.md", "route": "/components/search/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/search/design.md", "route": "/components/search/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/search/test-helpers.md", "route": "/components/search/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/search/search.docs.mdx", "packages/components/src/components/search/docs/search.code.docs.mdx", "packages/components/src/components/search/docs/search.design.docs.mdx", "packages/components/src/components/search/docs/search.testHelpers.docs.mdx" ] }, { "title": "SegmentedControl", "slug": "segmented-control", "route": "/components/segmented-control", "section": "components/forms", "sectionTitle": "Forms", "description": "Toggle from a set of two or more options. SegmentedControl is essentially a styled wrapper around a group of radio inputs.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-segmentedcontrol-playground--default", "github": "packages/components/src/components/segmented-control", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=216-12402&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/" }, "searchTags": [ "Option" ], "files": { "index": "/components/segmented-control.md", "overview": "/components/segmented-control/overview.md", "api": "/components/segmented-control/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/segmented-control/code.md", "route": "/components/segmented-control/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/segmented-control/design.md", "route": "/components/segmented-control/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/segmented-control/test-helpers.md", "route": "/components/segmented-control/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/segmented-control/segmented-control.docs.mdx", "packages/components/src/components/segmented-control/docs/segmented-control.code.docs.mdx", "packages/components/src/components/segmented-control/docs/segmented-control.design.docs.mdx", "packages/components/src/components/segmented-control/docs/segmented-control.testHelpers.docs.mdx" ] }, { "title": "SelectPalette", "slug": "select-palette", "route": "/components/select-palette", "section": "components/forms", "sectionTitle": "Forms", "description": "The dropdown surface a Select renders, with an optional header, categories rail, detail pane and footer.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "in-progress", "testHelpers": "not-applicable" }, "links": { "story": "components-select-palette-playground--default", "github": "packages/components/src/components/select/palette", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" }, "searchTags": [ "palette", "command palette", "condition", "field picker", "rail", "detail pane" ], "relatedComponents": "Select, Combobox", "files": { "index": "/components/select-palette.md", "overview": "/components/select-palette/overview.md", "api": "/components/select-palette/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/select-palette/code.md", "route": "/components/select-palette/code" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/select/palette/select-palette.docs.mdx", "packages/components/src/components/select/palette/docs/select-palette.code.docs.mdx" ] }, { "title": "Select", "slug": "select", "route": "/components/select", "section": "components/forms", "sectionTitle": "Forms", "description": "Selecting a value from a dropdown list of options.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-select-playground--default", "github": "packages/components/src/components/select", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=216-12403&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" }, "files": { "index": "/components/select.md", "overview": "/components/select/overview.md", "aiGuidelines": "/ai-guidelines/select.md", "aiGuidelinesRoute": "/components/select/ai-guidelines", "api": "/components/select/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/select/code.md", "route": "/components/select/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/select/design.md", "route": "/components/select/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/select/accessibility.md", "route": "/components/select/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/select/test-helpers.md", "route": "/components/select/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/select/select.docs.mdx", "packages/components/src/components/select/docs/select.ai-guidelines.md", "packages/components/src/components/select/docs/select.code.docs.mdx", "packages/components/src/components/select/docs/select.design.docs.mdx", "packages/components/src/components/select/docs/select.a11y.docs.mdx", "packages/components/src/components/select/docs/select.testHelpers.docs.mdx" ] }, { "title": "SetupFlow", "slug": "setup-flow", "route": "/components/setup-flow", "section": "components/navigation", "sectionTitle": "Navigation", "description": "An ordered set of steps that collapse into editable summaries as they are completed, ending in one explicit commit.", "status": { "design": "in-progress", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-setupflow-playground--default", "github": "packages/components/src/components/setup-flow" }, "searchTags": [ "SetupFlowStep", "SetupFlowFooter", "setup", "flow", "steps", "step", "wizard", "guided", "configuration", "summary", "review", "commit" ], "relatedComponents": [ "stepper", "accordion-group", "form" ], "files": { "index": "/components/setup-flow.md", "overview": "/components/setup-flow/overview.md", "aiGuidelines": "/ai-guidelines/setup-flow.md", "aiGuidelinesRoute": "/components/setup-flow/ai-guidelines", "api": "/components/setup-flow/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/setup-flow/code.md", "route": "/components/setup-flow/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/setup-flow/design.md", "route": "/components/setup-flow/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/setup-flow/accessibility.md", "route": "/components/setup-flow/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/setup-flow/test-helpers.md", "route": "/components/setup-flow/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/setup-flow/setup-flow.docs.mdx", "packages/components/src/components/setup-flow/docs/setup-flow.ai-guidelines.md", "packages/components/src/components/setup-flow/docs/setup-flow.code.docs.mdx", "packages/components/src/components/setup-flow/docs/setup-flow.design.docs.mdx", "packages/components/src/components/setup-flow/docs/setup-flow.a11y.docs.mdx", "packages/components/src/components/setup-flow/docs/setup-flow.testHelpers.docs.mdx" ] }, { "title": "SideNav", "slug": "side-nav", "route": "/components/side-nav", "section": "components/navigation", "sectionTitle": "Navigation", "description": "A component to display a navigation sidebar.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-sidenav-playground--default", "github": "packages/components/src/components/side-nav", "figma": "https://www.figma.com/design/Bqk4OAGqutCWKatBg9r8nB/2.-Pluma-Components?node-id=5578-6967&m=dev" }, "files": { "index": "/components/side-nav.md", "overview": "/components/side-nav/overview.md", "api": "/components/side-nav/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/side-nav/code.md", "route": "/components/side-nav/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/side-nav/design.md", "route": "/components/side-nav/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/side-nav/test-helpers.md", "route": "/components/side-nav/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/side-nav/side-nav.docs.mdx", "packages/components/src/components/side-nav/docs/side-nav.code.docs.mdx", "packages/components/src/components/side-nav/docs/side-nav.design.docs.mdx", "packages/components/src/components/side-nav/docs/side-nav.testHelpers.docs.mdx" ] }, { "title": "SkeletonShape", "slug": "skeleton-shape", "route": "/components/skeleton-shape", "section": "components/feedback", "sectionTitle": "Feedback", "description": "A placeholder component that mimics the shape of various UI elements while data is loading.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-skeletonshape-playground--default", "github": "packages/components/src/components/skeleton-shape" }, "files": { "index": "/components/skeleton-shape.md", "overview": "/components/skeleton-shape/overview.md", "api": "/components/skeleton-shape/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/skeleton-shape/code.md", "route": "/components/skeleton-shape/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/skeleton-shape/design.md", "route": "/components/skeleton-shape/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/skeleton-shape/skeleton-shape.docs.mdx", "packages/components/src/components/skeleton-shape/docs/skeleton-shape.code.docs.mdx", "packages/components/src/components/skeleton-shape/docs/skeleton-shape.design.docs.mdx" ] }, { "title": "SkeletonText", "slug": "skeleton-text", "route": "/components/skeleton-text", "section": "components/feedback", "sectionTitle": "Feedback", "description": "A placeholder component that mimics the shape of text content while data is loading.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-skeletontext-playground--default", "github": "packages/components/src/components/skeleton-text" }, "files": { "index": "/components/skeleton-text.md", "overview": "/components/skeleton-text/overview.md", "api": "/components/skeleton-text/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/skeleton-text/code.md", "route": "/components/skeleton-text/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/skeleton-text/design.md", "route": "/components/skeleton-text/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/skeleton-text/skeleton-text.docs.mdx", "packages/components/src/components/skeleton-text/docs/skeleton-text.code.docs.mdx", "packages/components/src/components/skeleton-text/docs/skeleton-text.design.docs.mdx" ] }, { "title": "Slider", "slug": "slider", "route": "/components/slider", "section": "components/forms", "sectionTitle": "Forms", "description": "Choose a number value within a range.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-slider-playground--default", "github": "packages/components/src/components/slider", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=356-14996&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/slider/" }, "files": { "index": "/components/slider.md", "overview": "/components/slider/overview.md", "api": "/components/slider/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/slider/code.md", "route": "/components/slider/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/slider/design.md", "route": "/components/slider/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/slider/test-helpers.md", "route": "/components/slider/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/slider/slider.docs.mdx", "packages/components/src/components/slider/docs/slider.code.docs.mdx", "packages/components/src/components/slider/docs/slider.design.docs.mdx", "packages/components/src/components/slider/docs/slider.testHelpers.docs.mdx" ] }, { "title": "Snackbar", "slug": "snackbar", "route": "/components/snackbar", "section": "components/feedback", "sectionTitle": "Feedback", "description": "A non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. Snackbars communicate messages that are minimally interruptive.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-snackbar-playground--default", "github": "packages/components/src/components/snackbar", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=397-6083&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/alert/" }, "searchTags": [ "useSnackbars" ], "files": { "index": "/components/snackbar.md", "overview": "/components/snackbar/overview.md", "api": "/components/snackbar/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/snackbar/code.md", "route": "/components/snackbar/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/snackbar/design.md", "route": "/components/snackbar/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/snackbar/test-helpers.md", "route": "/components/snackbar/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/snackbar/snackbar.docs.mdx", "packages/components/src/components/snackbar/docs/snackbar.code.docs.mdx", "packages/components/src/components/snackbar/docs/snackbar.design.docs.mdx", "packages/components/src/components/snackbar/docs/snackbar.testHelpers.docs.mdx" ] }, { "title": "Spinner", "slug": "spinner", "route": "/components/spinner", "section": "components/feedback", "sectionTitle": "Feedback", "description": "Spinners are animated icons used to indicate a content area's loading state.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-spinner-playground--default", "github": "packages/components/src/components/spinner" }, "files": { "index": "/components/spinner.md", "overview": "/components/spinner/overview.md", "aiGuidelines": "/ai-guidelines/spinner.md", "aiGuidelinesRoute": "/components/spinner/ai-guidelines", "api": "/components/spinner/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/spinner/code.md", "route": "/components/spinner/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/spinner/design.md", "route": "/components/spinner/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/spinner/accessibility.md", "route": "/components/spinner/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/spinner/test-helpers.md", "route": "/components/spinner/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/spinner/spinner.docs.mdx", "packages/components/src/components/spinner/docs/spinner.ai-guidelines.md", "packages/components/src/components/spinner/docs/spinner.code.docs.mdx", "packages/components/src/components/spinner/docs/spinner.design.docs.mdx", "packages/components/src/components/spinner/docs/spinner.a11y.docs.mdx", "packages/components/src/components/spinner/docs/spinner.testHelpers.docs.mdx" ] }, { "title": "SplitView", "slug": "split-view", "route": "/components/split-view", "section": "components/layout", "sectionTitle": "Layout", "description": "A layout component for splitting a space into resizable, nestable panes with draggable handles.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-splitview-playground--default", "github": "packages/components/src/components/split-view" }, "files": { "index": "/components/split-view.md", "overview": "/components/split-view/overview.md", "api": "/components/split-view/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/split-view/code.md", "route": "/components/split-view/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/split-view/design.md", "route": "/components/split-view/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/split-view/test-helpers.md", "route": "/components/split-view/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/split-view/split-view.docs.mdx", "packages/components/src/components/split-view/docs/split-view.code.docs.mdx", "packages/components/src/components/split-view/docs/split-view.design.docs.mdx", "packages/components/src/components/split-view/docs/split-view.testHelpers.docs.mdx" ] }, { "title": "Stack", "slug": "stack", "route": "/components/stack", "section": "components/layout", "sectionTitle": "Layout", "description": "A utility component for creating vertical flex containers.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "story": "components-stack-playground--default", "github": "packages/components/src/components/stack" }, "files": { "index": "/components/stack.md", "overview": "/components/stack/overview.md", "api": "/components/stack/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/stack/code.md", "route": "/components/stack/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/stack/design.md", "route": "/components/stack/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/stack/stack.docs.mdx", "packages/components/src/components/stack/docs/stack.code.docs.mdx", "packages/components/src/components/stack/docs/stack.design.docs.mdx" ] }, { "title": "StatusIndicator", "slug": "status-indicator", "route": "/components/status-indicator", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "A small colored circle used to indicate status or state.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-statusindicator-playground--default", "github": "packages/components/src/components/status-indicator", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?node-id=3618-680&m=dev" }, "files": { "index": "/components/status-indicator.md", "overview": "/components/status-indicator/overview.md", "api": "/components/status-indicator/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/status-indicator/code.md", "route": "/components/status-indicator/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/status-indicator/design.md", "route": "/components/status-indicator/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/status-indicator/test-helpers.md", "route": "/components/status-indicator/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/status-indicator/status-indicator.docs.mdx", "packages/components/src/components/status-indicator/docs/status-indicator.code.docs.mdx", "packages/components/src/components/status-indicator/docs/status-indicator.design.docs.mdx", "packages/components/src/components/status-indicator/docs/status-indicator.testHelpers.docs.mdx" ] }, { "title": "Stepper", "slug": "stepper", "route": "/components/stepper", "section": "components/navigation", "sectionTitle": "Navigation", "description": "Communicates progress through the ordered steps of a wizard or multi-step flow.", "status": { "design": "in-progress", "react": "done", "ember": "done", "test": "done", "docs": "in-progress", "testHelpers": "done" }, "links": { "story": "components-stepper-playground--default", "github": "packages/components/src/components/stepper" }, "searchTags": [ "Step", "wizard", "progress" ], "files": { "index": "/components/stepper.md", "overview": "/components/stepper/overview.md", "aiGuidelines": "/ai-guidelines/stepper.md", "aiGuidelinesRoute": "/components/stepper/ai-guidelines", "api": "/components/stepper/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/stepper/code.md", "route": "/components/stepper/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/stepper/design.md", "route": "/components/stepper/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/stepper/accessibility.md", "route": "/components/stepper/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/stepper/test-helpers.md", "route": "/components/stepper/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/stepper/stepper.docs.mdx", "packages/components/src/components/stepper/docs/stepper.ai-guidelines.md", "packages/components/src/components/stepper/docs/stepper.code.docs.mdx", "packages/components/src/components/stepper/docs/stepper.design.docs.mdx", "packages/components/src/components/stepper/docs/stepper.a11y.docs.mdx", "packages/components/src/components/stepper/docs/stepper.testHelpers.docs.mdx" ] }, { "title": "Strong", "slug": "strong", "route": "/components/strong", "section": "components/typography", "sectionTitle": "Typography", "description": "Strong renders bold text for visual weight and importance.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-strong-playground--default", "github": "packages/components/src/components/strong" }, "files": { "index": "/components/strong.md", "overview": "/components/strong/overview.md", "aiGuidelines": "/ai-guidelines/strong.md", "aiGuidelinesRoute": "/components/strong/ai-guidelines", "api": "/components/strong/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/strong/code.md", "route": "/components/strong/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/strong/design.md", "route": "/components/strong/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/strong/accessibility.md", "route": "/components/strong/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/strong/test-helpers.md", "route": "/components/strong/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/strong/strong.docs.mdx", "packages/components/src/components/strong/docs/strong.ai-guidelines.md", "packages/components/src/components/strong/docs/strong.code.docs.mdx", "packages/components/src/components/strong/docs/strong.design.docs.mdx", "packages/components/src/components/strong/docs/strong.a11y.docs.mdx", "packages/components/src/components/strong/docs/strong.testHelpers.docs.mdx" ] }, { "title": "TabNav", "slug": "tab-nav", "route": "/components/tab-nav", "section": "components/navigation", "sectionTitle": "Navigation", "description": "A navigation component to move between different views within the same page hierarchy.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-tabnav-playground--default", "github": "packages/components/src/components/tabnav", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=292-8818&mode=dev" }, "searchTags": [ "List", "NavTab" ], "files": { "index": "/components/tab-nav.md", "overview": "/components/tab-nav/overview.md", "api": "/components/tab-nav/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/tab-nav/code.md", "route": "/components/tab-nav/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/tab-nav/design.md", "route": "/components/tab-nav/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/tab-nav/accessibility.md", "route": "/components/tab-nav/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/tab-nav/test-helpers.md", "route": "/components/tab-nav/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/tab-nav/tab-nav.docs.mdx", "packages/components/src/components/tab-nav/docs/tab-nav.code.docs.mdx", "packages/components/src/components/tab-nav/docs/tab-nav.design.docs.mdx", "packages/components/src/components/tab-nav/docs/tab-nav.a11y.docs.mdx", "packages/components/src/components/tab-nav/docs/tab-nav.testHelpers.docs.mdx" ] }, { "title": "Table", "slug": "table", "route": "/components/table", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Tables display a set of data in an organized tabular format.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-table-playground--default", "github": "packages/components/src/components/table", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=397-6081&mode=dev" }, "searchTags": [ "Thead", "Tbody", "Tr", "Th", "Td" ], "files": { "index": "/components/table.md", "overview": "/components/table/overview.md", "aiGuidelines": "/ai-guidelines/table.md", "aiGuidelinesRoute": "/components/table/ai-guidelines", "api": "/components/table/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/table/code.md", "route": "/components/table/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/table/design.md", "route": "/components/table/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/table/accessibility.md", "route": "/components/table/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/table/test-helpers.md", "route": "/components/table/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/table/table.docs.mdx", "packages/components/src/components/table/docs/table.ai-guidelines.md", "packages/components/src/components/table/docs/table.code.docs.mdx", "packages/components/src/components/table/docs/table.design.docs.mdx", "packages/components/src/components/table/docs/table.a11y.docs.mdx", "packages/components/src/components/table/docs/table.testHelpers.docs.mdx" ] }, { "title": "Tabs", "slug": "tabs", "route": "/components/tabs", "section": "components/navigation", "sectionTitle": "Navigation", "description": "A component to switch between different views within the same context.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-tabs-playground--default", "github": "packages/components/src/components/tabs", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=292-8818&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" }, "searchTags": [ "List", "Tab", "Panel" ], "files": { "index": "/components/tabs.md", "overview": "/components/tabs/overview.md", "api": "/components/tabs/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/tabs/code.md", "route": "/components/tabs/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/tabs/design.md", "route": "/components/tabs/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/tabs/test-helpers.md", "route": "/components/tabs/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/tabs/tabs.docs.mdx", "packages/components/src/components/tabs/docs/tabs.code.docs.mdx", "packages/components/src/components/tabs/docs/tabs.design.docs.mdx", "packages/components/src/components/tabs/docs/tabs.testHelpers.docs.mdx" ] }, { "title": "Tag", "slug": "tag", "route": "/components/tag", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Tags represent user-generated, interactive categorization — items a person can add, apply, and remove, like filter criteria or audience attributes.", "status": { "design": "done", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-tag-playground--default", "github": "packages/components/src/components/tag", "figma": "https://www.figma.com/design/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?m=auto&node-id=3698-40996&focus-id=3654-5682" }, "files": { "index": "/components/tag.md", "overview": "/components/tag/overview.md", "aiGuidelines": "/ai-guidelines/tag.md", "aiGuidelinesRoute": "/components/tag/ai-guidelines", "api": "/components/tag/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/tag/code.md", "route": "/components/tag/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/tag/design.md", "route": "/components/tag/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/tag/test-helpers.md", "route": "/components/tag/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/tag/tag.docs.mdx", "packages/components/src/components/tag/docs/tag.ai-guidelines.md", "packages/components/src/components/tag/docs/tag.code.docs.mdx", "packages/components/src/components/tag/docs/tag.design.docs.mdx", "packages/components/src/components/tag/docs/tag.testHelpers.docs.mdx" ] }, { "title": "Text", "slug": "text", "route": "/components/text", "section": "components/typography", "sectionTitle": "Typography", "description": "Text is a foundational component used to apply typographic styles.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-text-playground--default", "github": "packages/components/src/components/text" }, "files": { "index": "/components/text.md", "overview": "/components/text/overview.md", "aiGuidelines": "/ai-guidelines/text.md", "aiGuidelinesRoute": "/components/text/ai-guidelines", "api": "/components/text/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/text/code.md", "route": "/components/text/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/text/design.md", "route": "/components/text/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/text/accessibility.md", "route": "/components/text/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/text/test-helpers.md", "route": "/components/text/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/text/text.docs.mdx", "packages/components/src/components/text/docs/text.ai-guidelines.md", "packages/components/src/components/text/docs/text.code.docs.mdx", "packages/components/src/components/text/docs/text.design.docs.mdx", "packages/components/src/components/text/docs/text.a11y.docs.mdx", "packages/components/src/components/text/docs/text.testHelpers.docs.mdx" ] }, { "title": "TextArea", "slug": "text-area", "route": "/components/text-area", "section": "components/forms", "sectionTitle": "Forms", "description": "A textarea component for user input.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-textarea-playground--default", "github": "packages/components/src/components/text-area", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=101-11151&mode=dev" }, "files": { "index": "/components/text-area.md", "overview": "/components/text-area/overview.md", "api": "/components/text-area/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/text-area/code.md", "route": "/components/text-area/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/text-area/design.md", "route": "/components/text-area/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/text-area/accessibility.md", "route": "/components/text-area/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/text-area/test-helpers.md", "route": "/components/text-area/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/text-area/text-area.docs.mdx", "packages/components/src/components/text-area/docs/text-area.code.docs.mdx", "packages/components/src/components/text-area/docs/text-area.design.docs.mdx", "packages/components/src/components/text-area/docs/text-area.a11y.docs.mdx", "packages/components/src/components/text-area/docs/text-area.testHelpers.docs.mdx" ] }, { "title": "TextField", "slug": "text-field", "route": "/components/text-field", "section": "components/forms", "sectionTitle": "Forms", "description": "A styled text input field.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-textfield-playground--default", "github": "packages/components/src/components/text-field", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=98-1179&mode=dev" }, "relatedComponents": [ "TextArea", "Search" ], "files": { "index": "/components/text-field.md", "overview": "/components/text-field/overview.md", "aiGuidelines": "/ai-guidelines/text-field.md", "aiGuidelinesRoute": "/components/text-field/ai-guidelines", "api": "/components/text-field/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/text-field/code.md", "route": "/components/text-field/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/text-field/design.md", "route": "/components/text-field/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/text-field/accessibility.md", "route": "/components/text-field/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/text-field/test-helpers.md", "route": "/components/text-field/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/text-field/text-field.docs.mdx", "packages/components/src/components/text-field/docs/text-field.ai-guidelines.md", "packages/components/src/components/text-field/docs/text-field.code.docs.mdx", "packages/components/src/components/text-field/docs/text-field.design.docs.mdx", "packages/components/src/components/text-field/docs/text-field.a11y.docs.mdx", "packages/components/src/components/text-field/docs/text-field.testHelpers.docs.mdx" ] }, { "title": "TextLabel", "slug": "text-label", "route": "/components/text-label", "section": "components/typography", "sectionTitle": "Typography", "description": "TextLabel captions form controls or definitions with contextual information.", "status": { "design": "not-started", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-textlabel-playground--default", "github": "packages/components/src/components/text-label" }, "files": { "index": "/components/text-label.md", "overview": "/components/text-label/overview.md", "aiGuidelines": "/ai-guidelines/text-label.md", "aiGuidelinesRoute": "/components/text-label/ai-guidelines", "api": "/components/text-label/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/text-label/code.md", "route": "/components/text-label/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/text-label/design.md", "route": "/components/text-label/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/text-label/accessibility.md", "route": "/components/text-label/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/text-label/test-helpers.md", "route": "/components/text-label/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/text-label/text-label.docs.mdx", "packages/components/src/components/text-label/docs/text-label.ai-guidelines.md", "packages/components/src/components/text-label/docs/text-label.code.docs.mdx", "packages/components/src/components/text-label/docs/text-label.design.docs.mdx", "packages/components/src/components/text-label/docs/text-label.a11y.docs.mdx", "packages/components/src/components/text-label/docs/text-label.testHelpers.docs.mdx" ] }, { "title": "Timeline", "slug": "timeline", "route": "/components/timeline", "section": "components/dataDisplay", "sectionTitle": "Data display", "description": "Presents ordered events, milestones, or state transitions with a connected vertical rail.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-timeline-playground--default", "github": "packages/components/src/components/timeline" }, "searchTags": [ "Item" ], "files": { "index": "/components/timeline.md", "overview": "/components/timeline/overview.md", "aiGuidelines": "/ai-guidelines/timeline.md", "aiGuidelinesRoute": "/components/timeline/ai-guidelines", "api": "/components/timeline/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/timeline/code.md", "route": "/components/timeline/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/timeline/design.md", "route": "/components/timeline/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/timeline/accessibility.md", "route": "/components/timeline/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/timeline/test-helpers.md", "route": "/components/timeline/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/timeline/timeline.docs.mdx", "packages/components/src/components/timeline/docs/timeline.ai-guidelines.md", "packages/components/src/components/timeline/docs/timeline.code.docs.mdx", "packages/components/src/components/timeline/docs/timeline.design.docs.mdx", "packages/components/src/components/timeline/docs/timeline.a11y.docs.mdx", "packages/components/src/components/timeline/docs/timeline.testHelpers.docs.mdx" ] }, { "title": "Toggle", "slug": "toggle", "route": "/components/toggle", "section": "components/forms", "sectionTitle": "Forms", "description": "The Toggle component renders a switch to toggle between enabled or disabled states.", "status": { "design": "done", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "done" }, "links": { "story": "components-toggle-playground--default", "github": "packages/components/src/components/toggle", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=356-15012&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/switch/" }, "files": { "index": "/components/toggle.md", "overview": "/components/toggle/overview.md", "aiGuidelines": "/ai-guidelines/toggle.md", "aiGuidelinesRoute": "/components/toggle/ai-guidelines", "api": "/components/toggle/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/toggle/code.md", "route": "/components/toggle/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/toggle/design.md", "route": "/components/toggle/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/toggle/accessibility.md", "route": "/components/toggle/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/toggle/test-helpers.md", "route": "/components/toggle/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/toggle/toggle.docs.mdx", "packages/components/src/components/toggle/docs/toggle.ai-guidelines.md", "packages/components/src/components/toggle/docs/toggle.code.docs.mdx", "packages/components/src/components/toggle/docs/toggle.design.docs.mdx", "packages/components/src/components/toggle/docs/toggle.a11y.docs.mdx", "packages/components/src/components/toggle/docs/toggle.testHelpers.docs.mdx" ] }, { "title": "Tooltip", "slug": "tooltip", "route": "/components/tooltip", "section": "components/overlays", "sectionTitle": "Overlays", "description": "A floating label to explain additional context in the UI. They're triggered by interaction events like hover, focus, tap, or click.", "status": { "design": "done", "react": "done", "ember": "done", "test": "in-progress", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-tooltip-playground--default", "github": "packages/components/src/components/tooltip", "figma": "https://www.figma.com/file/pLWgePX9GnnzdINzLOvyCN/4.-Pluma-Component-Specs?type=design&node-id=20-913&mode=dev", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/" }, "searchTags": [ "Content", "Group" ], "files": { "index": "/components/tooltip.md", "overview": "/components/tooltip/overview.md", "aiGuidelines": "/ai-guidelines/tooltip.md", "aiGuidelinesRoute": "/components/tooltip/ai-guidelines", "api": "/components/tooltip/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/tooltip/code.md", "route": "/components/tooltip/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/tooltip/design.md", "route": "/components/tooltip/design" }, { "value": "a11y", "title": "Accessibility Guidelines", "path": "/components/tooltip/accessibility.md", "route": "/components/tooltip/accessibility" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/tooltip/test-helpers.md", "route": "/components/tooltip/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/tooltip/tooltip.docs.mdx", "packages/components/src/components/tooltip/docs/tooltip.ai-guidelines.md", "packages/components/src/components/tooltip/docs/tooltip.code.docs.mdx", "packages/components/src/components/tooltip/docs/tooltip.design.docs.mdx", "packages/components/src/components/tooltip/docs/tooltip.a11y.docs.mdx", "packages/components/src/components/tooltip/docs/tooltip.testHelpers.docs.mdx" ] }, { "title": "Truncated", "slug": "truncated", "route": "/components/truncated", "section": "components/typography", "sectionTitle": "Typography", "description": "A component that handles text truncation with an accessible tooltip that appears only when the text is actually truncated.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "done", "docs": "done", "testHelpers": "not-started" }, "links": { "story": "components-truncated-playground--default", "github": "packages/components/src/components/truncated", "ariaPattern": "https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/" }, "files": { "index": "/components/truncated.md", "overview": "/components/truncated/overview.md", "api": "/components/truncated/api.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/truncated/code.md", "route": "/components/truncated/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/truncated/design.md", "route": "/components/truncated/design" }, { "value": "testHelpers", "title": "Test Helpers", "path": "/components/truncated/test-helpers.md", "route": "/components/truncated/test-helpers" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/truncated/truncated.docs.mdx", "packages/components/src/components/truncated/docs/truncated.code.docs.mdx", "packages/components/src/components/truncated/docs/truncated.design.docs.mdx", "packages/components/src/components/truncated/docs/truncated.testHelpers.docs.mdx" ] }, { "title": "VisuallyHidden", "slug": "visually-hidden", "route": "/components/visually-hidden", "section": "components/misc", "sectionTitle": "Misc", "description": "A utility component that visually hides its children while keeping them accessible to screen readers.", "status": { "design": "not-applicable", "react": "done", "ember": "done", "test": "not-applicable", "docs": "done", "testHelpers": "not-applicable" }, "links": { "github": "packages/components/src/components/visually-hidden" }, "files": { "index": "/components/visually-hidden.md", "overview": "/components/visually-hidden/overview.md", "tabs": [ { "value": "code", "title": "Code Guidelines", "path": "/components/visually-hidden/code.md", "route": "/components/visually-hidden/code" }, { "value": "design", "title": "Design Guidelines", "path": "/components/visually-hidden/design.md", "route": "/components/visually-hidden/design" } ], "subPages": [] }, "sourcePaths": [ "packages/components/src/components/visually-hidden/visually-hidden.docs.mdx", "packages/components/src/components/visually-hidden/docs/visually-hidden.code.docs.mdx", "packages/components/src/components/visually-hidden/docs/visually-hidden.design.docs.mdx" ] } ] }