{ "$schema": "../docs/registry/schema/component-registry.schema.json", "version": 1, "families": [ { "family": "accordion", "readmePath": "docs/registry/families/accordion/README.md", "metaPath": "docs/registry/families/accordion/registry.meta.json", "generatedPath": "docs/registry/families/accordion/registry.generated.json", "visualPaths": [ "docs/registry/families/accordion/visuals/file-map.mmd", "docs/registry/families/accordion/visuals/interaction-map.mmd", "docs/registry/families/accordion/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "accordion", "displayName": "Accordion", "status": "shipped", "summary": "Grouped disclosure family with a low-level accordion atom, a canonical AccordionField path, and thin purpose-accordion wrappers.", "philosophy": [ "Teach AccordionField as the canonical grouped disclosure surface and keep raw Accordion as the low-level escape hatch.", "Keep trigger-to-panel wiring in core and grouped label or error wiring in shared helpers so React and Vue stay aligned.", "Treat grouped invalid-state behavior on AccordionField as an explicit family choice rather than an accidental adapter detail.", "Keep purpose-accordion wrappers thin and semantic so they add meaning without becoming a second accordion implementation." ], "usage": { "useWhen": [ "The UI needs collapsible sections with grouped labeling, optional description, and optional error support.", "The product flow maps clearly to FAQAccordion, SettingsAccordion, or SectionsAccordion and benefits from self-documenting purpose metadata.", "The team wants React and Vue accordion behavior to stay aligned through shared core helpers and one contract file." ], "avoidWhen": [ "A different pattern such as tabs, dialog, or simple always-visible content is the more honest interaction model.", "The implementation only needs a standalone disclosure but cannot own parent state coordination or surrounding list semantics.", "The team expects advanced focus orchestration, nested accordion policy, or lazy mounting behavior that this family does not currently define." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared accordion contract coverage across React and Vue for trigger and panel wiring, disabled behavior, grouped field semantics, invalid-state wiring, and single-open or multi-open behavior.", "Local variant tests for FAQ, settings, and sections purpose metadata in both adapters.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for grouped reading flow, focus visibility, and open-state comprehension.", "Future decisions about which accordion stories should join stricter automated accessibility gates.", "Whether purpose metadata should eventually move from package-local tests into the shared accordion contract." ], "roadmapAnchors": [ "AXE_ROADMAP.md#p2--second-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "notes": [ "Accordion completed a first-pass audit and now has an explicit spec-backed family contract.", "The family still sits outside the wave-1 central semantic registry even though purpose wrappers already emit useful metadata." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/accordion/Introduction.mdx", "apps/storybook-react/src/stories/accordion/accordion-field.stories.tsx", "apps/storybook-react/src/stories/accordion/accordion.stories.tsx", "apps/storybook-react/src/stories/accordion/faq-accordion.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/accordion/Introduction.mdx", "apps/storybook-vue/src/stories/accordion/accordion-field.stories.ts", "apps/storybook-vue/src/stories/accordion/accordion.stories.ts", "apps/storybook-vue/src/stories/accordion/faq-accordion.stories.ts" ] }, "preferredStates": [ "collapsed", "expanded", "default", "hover", "pressed", "disabled", "focus", "single-open", "multi-open" ] }, "openQuestions": [ "Which Accordion-family stories should later join automated accessibility gates?", "Should purpose-metadata behavior eventually move into the shared accordion contract, or remain package-local coverage?" ] }, "generated": { "family": "accordion", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/accordion-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#p2--second-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "core": [ "packages/core/src/components/atoms/accordion/accordion-a11y.ts", "packages/core/src/components/atoms/accordion/accordion-recipe.ts", "packages/core/src/components/atoms/accordion/accordion-types.ts", "packages/core/src/components/atoms/accordion/index.ts" ], "presets": [ "packages/presets/src/firstEdition/accordion.css", "packages/presets/src/firstEdition/molecules/accordion-field.css" ], "react": [ "packages/react/src/components/accordion/__tests__/accordion-field.test.tsx", "packages/react/src/components/accordion/__tests__/accordion.test.tsx", "packages/react/src/components/accordion/__tests__/variants.test.tsx", "packages/react/src/components/accordion/accordion-field.tsx", "packages/react/src/components/accordion/accordion.tsx", "packages/react/src/components/accordion/index.ts", "packages/react/src/components/accordion/variants.tsx" ], "vue": [ "packages/vue/src/components/accordion/__tests__/accordion-field.test.ts", "packages/vue/src/components/accordion/__tests__/accordion.test.ts", "packages/vue/src/components/accordion/__tests__/variants.test.ts", "packages/vue/src/components/accordion/accordion-field.ts", "packages/vue/src/components/accordion/accordion.ts", "packages/vue/src/components/accordion/index.ts", "packages/vue/src/components/accordion/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/accordion/Accordion.svelte", "packages/svelte/src/lib/components/accordion/AccordionField.svelte", "packages/svelte/src/lib/components/accordion/FAQAccordion.svelte", "packages/svelte/src/lib/components/accordion/index.ts", "packages/svelte/src/lib/components/accordion/SectionsAccordion.svelte", "packages/svelte/src/lib/components/accordion/SettingsAccordion.svelte", "packages/svelte/src/lib/components/accordion/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/accordion/__tests__/accordion-introduction-docs.test.ts", "apps/storybook-react/src/stories/accordion/__tests__/accordion-taxonomy.test.ts", "apps/storybook-react/src/stories/accordion/accordion-field.stories.tsx", "apps/storybook-react/src/stories/accordion/accordion.stories.tsx", "apps/storybook-react/src/stories/accordion/faq-accordion.stories.tsx", "apps/storybook-react/src/stories/accordion/Introduction.mdx", "apps/storybook-react/src/stories/accordion/sections-accordion.stories.tsx", "apps/storybook-react/src/stories/accordion/settings-accordion.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/accordion/__tests__/accordion-introduction-docs.test.ts", "apps/storybook-vue/src/stories/accordion/__tests__/accordion-taxonomy.test.ts", "apps/storybook-vue/src/stories/accordion/accordion-field.stories.ts", "apps/storybook-vue/src/stories/accordion/accordion.stories.ts", "apps/storybook-vue/src/stories/accordion/faq-accordion.stories.ts", "apps/storybook-vue/src/stories/accordion/Introduction.mdx", "apps/storybook-vue/src/stories/accordion/sections-accordion.stories.ts", "apps/storybook-vue/src/stories/accordion/settings-accordion.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/accordion/__tests__/accordion-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/accordion/accordion-field.stories.ts", "apps/storybook-svelte/src/stories/accordion/accordion.stories.ts", "apps/storybook-svelte/src/stories/accordion/AccordionFieldControlled.svelte", "apps/storybook-svelte/src/stories/accordion/AccordionShowcase.svelte", "apps/storybook-svelte/src/stories/accordion/faq-accordion.stories.ts", "apps/storybook-svelte/src/stories/accordion/Introduction.mdx", "apps/storybook-svelte/src/stories/accordion/sections-accordion.stories.ts", "apps/storybook-svelte/src/stories/accordion/settings-accordion.stories.ts" ], "contracts": ["tests/contracts/accordion.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": ["faq", "settings", "sections"], "purposeAttributes": { "faq": { "data-purpose": "faq" }, "settings": { "data-purpose": "settings" }, "sections": { "data-purpose": "sections" } }, "sourceOfTruthPaths": [ "packages/react/src/components/accordion/variants.tsx", "packages/vue/src/components/accordion/variants.ts" ], "notes": [ "Accordion is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Purpose metadata currently lives in the React and Vue purpose-accordion wrappers rather than the central semantic registry." ] }, "design": { "componentJsons": [".figma/marwes/components/accordion.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-accordion/README.md" ], "pageReferences": [ ".figma/marwes/pages/-accordion/-accordion_1364-11755.json", ".figma/marwes/pages/-accordion/-accordion-dark_2276-47132.json", ".figma/marwes/pages/-accordion/component-container_1369-6219.json" ], "nodeReferences": { "accordionComponentSet": "1369:6218", "accordionLightFrame": "1364:11755", "accordionDarkFrame": "2276:47132", "accordionComponentContainer": "1369:6219" }, "figmaTokens": [ "accordion/surface", "accordion/border", "accordion/title", "accordion/content" ], "figmaStates": { "baseVariants": ["accordion", "accordion-field", "faq", "settings", "sections"], "interactionStates": [ "collapsed", "expanded", "default", "hover", "pressed", "disabled", "focus", "single-open", "multi-open" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Accordion is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Purpose metadata currently lives in the React and Vue purpose-accordion wrappers rather than the central semantic registry.", "Generated from docs/registry/families/accordion/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "avatar", "readmePath": "docs/registry/families/avatar/README.md", "metaPath": "docs/registry/families/avatar/registry.meta.json", "generatedPath": "docs/registry/families/avatar/registry.generated.json", "visualPaths": [ "docs/registry/families/avatar/visuals/file-map.mmd", "docs/registry/families/avatar/visuals/interaction-map.mmd", "docs/registry/families/avatar/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "avatar", "displayName": "Avatar", "status": "shipped", "summary": "Canonical identity family with a base Avatar atom, two scoped molecules, and thin semantic wrappers for profile, presence, and team contexts.", "philosophy": [ "Teach purpose wrappers first when the identity context is known and keep the raw Avatar surfaces as explicit escape hatches.", "Keep canonical family and purpose semantics in core so React and Vue emit the same metadata contract.", "Treat accessible naming as content-type dependent: images rely on alt text, while non-image avatars rely on ariaLabel or normalized initials.", "Keep molecule scope narrow to the shipped online badge and stacked avatar-group patterns rather than expanding into interactive identity controls." ], "usage": { "useWhen": [ "The UI needs a person or member identity surface with stable size, content-type, and semantic behavior.", "The product flow maps clearly to ProfileAvatar, PresenceAvatar, or TeamAvatarGroup and benefits from canonical purpose metadata.", "The team wants React and Vue avatar behavior to stay aligned through shared contracts and the central semantic registry." ], "avoidWhen": [ "The surface really needs an interactive profile menu, upload flow, or editable identity control rather than a static avatar family member.", "The implementation cannot provide truthful alt text or aria labeling for a non-decorative identity surface.", "The team expects avatar-group layouts beyond the current stacked medium pattern and overflow counter defined by the shipped family." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared avatar, avatar-badge, and avatar-group contracts across React and Vue.", "Local adapter tests for exports and purpose-wrapper metadata in both frameworks.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Product-level quality of alt text, aria labels, status labels, and overflow wording.", "Dev-time warning for image avatars without alt or ariaLabel is now implemented in avatar-a11y.ts.", "Any future expansion beyond the current non-interactive avatar, badge, and group scope." ], "roadmapAnchors": [ "AXE_ROADMAP.md#pr-8--dev-time-warnings-expansion", "AXE_ROADMAP.md#avatar" ], "notes": [ "Avatar completed a first-pass accessibility audit focused on image-naming quality, group labeling, and dev-warning coverage.", "The family now has a dev warning for unlabeled image avatars and expanded shared contract coverage for ariaLabel override and group default label." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/avatar/Introduction.mdx", "apps/storybook-react/src/stories/avatar/avatar.stories.tsx", "apps/storybook-react/src/stories/avatar/avatar-group.stories.tsx", "apps/storybook-react/src/stories/avatar/team-avatar-group.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/avatar/Introduction.mdx", "apps/storybook-vue/src/stories/avatar/avatar.stories.ts", "apps/storybook-vue/src/stories/avatar/avatar-group.stories.ts", "apps/storybook-vue/src/stories/avatar/team-avatar-group.stories.ts" ] }, "preferredStates": [ "small", "medium", "large", "initials", "icon", "image", "online", "stacked", "overflow", "light", "dark" ] }, "openQuestions": [ "Should likely unlabeled non-decorative image avatars eventually trigger a dev-time warning in core?", "When Avatar gets a dedicated audit pass, should AvatarGroup keep the current count-only overflow model or grow richer participant-summary guidance?" ] }, "generated": { "family": "avatar", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/avatar-family-accessibility.md"], "roadmap": ["AXE_ROADMAP.md#pr-8--dev-time-warnings-expansion", "AXE_ROADMAP.md#avatar"], "core": [ "packages/core/src/components/atoms/avatar/avatar-a11y.ts", "packages/core/src/components/atoms/avatar/avatar-recipe.ts", "packages/core/src/components/atoms/avatar/avatar-types.ts", "packages/core/src/components/atoms/avatar/index.ts" ], "presets": ["packages/presets/src/firstEdition/avatar.css"], "react": [ "packages/react/src/components/avatar/__tests__/avatar-badge.test.tsx", "packages/react/src/components/avatar/__tests__/avatar-group.test.tsx", "packages/react/src/components/avatar/__tests__/avatar.test.tsx", "packages/react/src/components/avatar/__tests__/index-exports.test.tsx", "packages/react/src/components/avatar/__tests__/variants.test.tsx", "packages/react/src/components/avatar/avatar-badge.tsx", "packages/react/src/components/avatar/avatar-group.tsx", "packages/react/src/components/avatar/avatar.tsx", "packages/react/src/components/avatar/index.ts", "packages/react/src/components/avatar/variants.tsx" ], "vue": [ "packages/vue/src/components/avatar/__tests__/avatar-badge.test.ts", "packages/vue/src/components/avatar/__tests__/avatar-group.test.ts", "packages/vue/src/components/avatar/__tests__/avatar.test.ts", "packages/vue/src/components/avatar/__tests__/index-exports.test.ts", "packages/vue/src/components/avatar/__tests__/variants.test.ts", "packages/vue/src/components/avatar/avatar-badge.ts", "packages/vue/src/components/avatar/avatar-group.ts", "packages/vue/src/components/avatar/avatar.ts", "packages/vue/src/components/avatar/index.ts", "packages/vue/src/components/avatar/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/avatar/Avatar.svelte", "packages/svelte/src/lib/components/avatar/AvatarBadge.svelte", "packages/svelte/src/lib/components/avatar/AvatarGroup.svelte", "packages/svelte/src/lib/components/avatar/index.ts", "packages/svelte/src/lib/components/avatar/PresenceAvatar.svelte", "packages/svelte/src/lib/components/avatar/ProfileAvatar.svelte", "packages/svelte/src/lib/components/avatar/TeamAvatarGroup.svelte", "packages/svelte/src/lib/components/avatar/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/avatar/__tests__/avatar-introduction-docs.test.ts", "apps/storybook-react/src/stories/avatar/__tests__/avatar-taxonomy.test.ts", "apps/storybook-react/src/stories/avatar/avatar-badge.stories.tsx", "apps/storybook-react/src/stories/avatar/avatar-group.stories.tsx", "apps/storybook-react/src/stories/avatar/avatar.stories.tsx", "apps/storybook-react/src/stories/avatar/AvatarGallery.tsx", "apps/storybook-react/src/stories/avatar/Introduction.mdx", "apps/storybook-react/src/stories/avatar/presence-avatar.stories.tsx", "apps/storybook-react/src/stories/avatar/profile-avatar.stories.tsx", "apps/storybook-react/src/stories/avatar/team-avatar-group.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/avatar/__tests__/avatar-introduction-docs.test.ts", "apps/storybook-vue/src/stories/avatar/__tests__/avatar-taxonomy.test.ts", "apps/storybook-vue/src/stories/avatar/avatar-badge.stories.ts", "apps/storybook-vue/src/stories/avatar/avatar-group.stories.ts", "apps/storybook-vue/src/stories/avatar/avatar.stories.ts", "apps/storybook-vue/src/stories/avatar/AvatarGallery.vue", "apps/storybook-vue/src/stories/avatar/Introduction.mdx", "apps/storybook-vue/src/stories/avatar/presence-avatar.stories.ts", "apps/storybook-vue/src/stories/avatar/profile-avatar.stories.ts", "apps/storybook-vue/src/stories/avatar/team-avatar-group.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/avatar/__tests__/avatar-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/avatar/avatar-badge.stories.ts", "apps/storybook-svelte/src/stories/avatar/avatar-group.stories.ts", "apps/storybook-svelte/src/stories/avatar/avatar.stories.ts", "apps/storybook-svelte/src/stories/avatar/AvatarBadgeGallery.svelte", "apps/storybook-svelte/src/stories/avatar/AvatarGallery.svelte", "apps/storybook-svelte/src/stories/avatar/AvatarGroupDark.svelte", "apps/storybook-svelte/src/stories/avatar/Introduction.mdx", "apps/storybook-svelte/src/stories/avatar/presence-avatar.stories.ts", "apps/storybook-svelte/src/stories/avatar/profile-avatar.stories.ts", "apps/storybook-svelte/src/stories/avatar/team-avatar-group.stories.ts" ], "contracts": [ "tests/contracts/avatar.contract.ts", "tests/contracts/avatar-badge.contract.ts", "tests/contracts/avatar-group.contract.ts" ] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "avatar", "canonicalAttributes": ["data-component", "data-size"], "allowedPurposes": ["profile", "presence", "team"], "purposeAttributes": { "presence": { "data-purpose": "presence" }, "profile": { "data-purpose": "profile" }, "team": { "data-purpose": "team" } }, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "Avatar has simple purpose semantics but multiple rendered identities across molecules." ] }, "design": { "componentJsons": [ ".figma/marwes/components/avatar.json", ".figma/marwes/components/avatar-badge.json", ".figma/marwes/components/avatar-group.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-avatar/README.md" ], "pageReferences": [ ".figma/marwes/pages/-avatar/component-container_1574-27051.json", ".figma/marwes/pages/-avatar/-avatar_1574-27460.json", ".figma/marwes/pages/-avatar/-avatar-dark_1574-27570.json" ], "nodeReferences": { "avatarComponentSet": "1574:27371", "avatarBadgeComponentSet": "1574:27394", "avatarGroupComponent": "1574:27395", "avatarLightFrame": "1574:27460", "avatarDarkFrame": "1574:27570" }, "figmaTokens": [], "figmaStates": { "baseVariants": [ "avatar", "avatar-badge", "avatar-group", "profile", "presence", "team" ], "interactionStates": [ "small", "medium", "large", "initials", "icon", "image", "online", "stacked", "overflow", "light", "dark" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Avatar has simple purpose semantics but multiple rendered identities across molecules.", "Generated from docs/registry/families/avatar/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "badge", "readmePath": "docs/registry/families/badge/README.md", "metaPath": "docs/registry/families/badge/registry.meta.json", "generatedPath": "docs/registry/families/badge/registry.generated.json", "visualPaths": [ "docs/registry/families/badge/visuals/file-map.mmd", "docs/registry/families/badge/visuals/interaction-map.mmd", "docs/registry/families/badge/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "badge", "displayName": "Badge", "status": "shipped", "summary": "Canonical compact-status family with a raw Badge atom, a BadgeGroup molecule, and thin purpose-badge wrappers for status, priority, and notification contexts.", "philosophy": [ "Teach purpose badges first when the meaning is known and keep raw Badge as the deliberate primitive and escape hatch.", "Keep canonical badge semantics in core so React, Vue, and Svelte emit the same data-component, data-purpose, and data-variant contract.", "Keep BadgeGroup structural and labeled rather than turning it into an interactive filter-chip or token-input system.", "Keep the shipped variant set honest to code and docs even though the current Figma page still shows an extra brand row that Marwes does not ship." ], "usage": { "useWhen": [ "The UI needs a compact, non-interactive status label, priority marker, or notification count with stable semantics.", "The product flow maps clearly to StatusBadge, PriorityBadge, or NotificationBadge and benefits from canonical purpose metadata.", "The team wants grouped badge presentation to stay aligned across React, Vue, and Svelte through BadgeGroup and one shared contract." ], "avoidWhen": [ "The surface is really an interactive chip, filter token, dismissible tag, or pill button rather than a passive badge.", "The implementation cannot provide truthful surrounding context or an ariaLabel for numeric-only badge content.", "The team expects a richer color-intent matrix such as the Figma-only brand row that is not currently part of the shipped API." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for default neutral behavior, variant classes, and ariaLabel passthrough.", "Shared badge contract coverage across React and Vue for canonical purpose semantics.", "Local adapter and Storybook taxonomy tests for Badge, BadgeGroup, and the purpose wrappers in both frameworks." ], "manualReviewRequired": [ "Product-level wording quality for numeric-only notification badges and short status labels.", "Whether grouped badges always have enough visible labeling or surrounding context in real layouts.", "Any future attempt to grow the family into interactive chips or to ship the current Figma-only brand tone." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Badge completed a first-pass accessibility audit focused on ariaLabel DOM delivery, BadgeGroup cross-adapter contract, and numeric badge guidance.", "The family now has a shared BadgeGroup contract and expanded badge contract plus a documented parity gap in the BadgeGroup label prop type." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/badge/Introduction.mdx", "apps/storybook-react/src/stories/badge/badge.stories.tsx", "apps/storybook-react/src/stories/badge/badge-group.stories.tsx", "apps/storybook-react/src/stories/badge/status-badge.stories.tsx", "apps/storybook-react/src/stories/badge/priority-badge.stories.tsx", "apps/storybook-react/src/stories/badge/notification-badge.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/badge/Introduction.mdx", "apps/storybook-vue/src/stories/badge/badge.stories.ts", "apps/storybook-vue/src/stories/badge/badge-group.stories.ts", "apps/storybook-vue/src/stories/badge/status-badge.stories.ts", "apps/storybook-vue/src/stories/badge/priority-badge.stories.ts", "apps/storybook-vue/src/stories/badge/notification-badge.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/badge/Introduction.mdx", "apps/storybook-svelte/src/stories/badge/badge.stories.ts", "apps/storybook-svelte/src/stories/badge/badge-group.stories.ts", "apps/storybook-svelte/src/stories/badge/status-badge.stories.ts", "apps/storybook-svelte/src/stories/badge/priority-badge.stories.ts", "apps/storybook-svelte/src/stories/badge/notification-badge.stories.ts" ] }, "preferredStates": [ "neutral", "info", "success", "warning", "error", "status", "priority", "notification", "grouped", "numeric", "light", "dark" ] }, "openQuestions": [ "Should the Figma-only brand badge row eventually become a shipped Badge variant, or should the registry keep treating it as design-only?", "If product teams ask for clickable filters, dismissible tags, or chips, should that remain a separate family instead of expanding the current passive badge contract?" ] }, "generated": { "family": "badge", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/badge-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/badge/badge-a11y.ts", "packages/core/src/components/atoms/badge/badge-recipe.ts", "packages/core/src/components/atoms/badge/badge-types.ts", "packages/core/src/components/atoms/badge/index.ts" ], "presets": ["packages/presets/src/firstEdition/badge.css"], "react": [ "packages/react/src/components/badge/__tests__/badge-group.test.tsx", "packages/react/src/components/badge/__tests__/badge.test.tsx", "packages/react/src/components/badge/__tests__/index-exports.test.tsx", "packages/react/src/components/badge/__tests__/variants.test.tsx", "packages/react/src/components/badge/badge-group.tsx", "packages/react/src/components/badge/badge.tsx", "packages/react/src/components/badge/index.ts", "packages/react/src/components/badge/variants.tsx" ], "vue": [ "packages/vue/src/components/badge/__tests__/badge-group.test.ts", "packages/vue/src/components/badge/__tests__/badge.test.ts", "packages/vue/src/components/badge/__tests__/index-exports.test.ts", "packages/vue/src/components/badge/__tests__/variants.test.ts", "packages/vue/src/components/badge/badge-group.ts", "packages/vue/src/components/badge/badge.ts", "packages/vue/src/components/badge/index.ts", "packages/vue/src/components/badge/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/badge/Badge.svelte", "packages/svelte/src/lib/components/badge/BadgeGroup.svelte", "packages/svelte/src/lib/components/badge/index.ts", "packages/svelte/src/lib/components/badge/NotificationBadge.svelte", "packages/svelte/src/lib/components/badge/PriorityBadge.svelte", "packages/svelte/src/lib/components/badge/StatusBadge.svelte", "packages/svelte/src/lib/components/badge/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/badge/__tests__/badge-introduction-docs.test.ts", "apps/storybook-react/src/stories/badge/__tests__/badge-taxonomy.test.ts", "apps/storybook-react/src/stories/badge/badge-group.stories.tsx", "apps/storybook-react/src/stories/badge/badge.stories.tsx", "apps/storybook-react/src/stories/badge/Introduction.mdx", "apps/storybook-react/src/stories/badge/notification-badge.stories.tsx", "apps/storybook-react/src/stories/badge/priority-badge.stories.tsx", "apps/storybook-react/src/stories/badge/status-badge.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/badge/__tests__/badge-introduction-docs.test.ts", "apps/storybook-vue/src/stories/badge/__tests__/badge-taxonomy.test.ts", "apps/storybook-vue/src/stories/badge/badge-group.stories.ts", "apps/storybook-vue/src/stories/badge/badge.stories.ts", "apps/storybook-vue/src/stories/badge/Introduction.mdx", "apps/storybook-vue/src/stories/badge/notification-badge.stories.ts", "apps/storybook-vue/src/stories/badge/priority-badge.stories.ts", "apps/storybook-vue/src/stories/badge/status-badge.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/badge/__tests__/badge-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/badge/AllNotifications.svelte", "apps/storybook-svelte/src/stories/badge/AllPriorities.svelte", "apps/storybook-svelte/src/stories/badge/AllStatuses.svelte", "apps/storybook-svelte/src/stories/badge/badge-group.stories.ts", "apps/storybook-svelte/src/stories/badge/badge.stories.ts", "apps/storybook-svelte/src/stories/badge/BadgeDarkGallery.svelte", "apps/storybook-svelte/src/stories/badge/BadgeGallery.svelte", "apps/storybook-svelte/src/stories/badge/BadgeGroupStory.svelte", "apps/storybook-svelte/src/stories/badge/Introduction.mdx", "apps/storybook-svelte/src/stories/badge/notification-badge.stories.ts", "apps/storybook-svelte/src/stories/badge/priority-badge.stories.ts", "apps/storybook-svelte/src/stories/badge/status-badge.stories.ts" ], "contracts": ["tests/contracts/badge.contract.ts"] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "badge", "canonicalAttributes": ["data-component", "data-variant"], "allowedPurposes": ["status", "priority", "notification"], "purposeAttributes": { "notification": { "data-purpose": "notification" }, "priority": { "data-purpose": "priority" }, "status": { "data-purpose": "status" } }, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": ["Badge needs base family identity normalized before full parity governance."] }, "design": { "componentJsons": [".figma/marwes/components/badge.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-badge/README.md" ], "pageReferences": [ ".figma/marwes/pages/-badge/-badge_1364-11603.json", ".figma/marwes/pages/-badge/-badge-dark_2276-56582.json", ".figma/marwes/pages/-badge/component-container_1369-6125.json", ".figma/marwes/pages/------playground---dashboard/badges_2832-30424.json" ], "nodeReferences": { "badgeLightFrame": "1364:11603", "badgeDarkFrame": "2276:56582", "badgeComponentContainer": "1369:6125", "badgeComponent": "1364:7721", "badgeDashboardFrame": "2832:30424" }, "figmaTokens": ["status-display/surface", "status-display/border", "status-display/text"], "figmaStates": { "baseVariants": [ "neutral", "brand", "info", "success", "warning", "error", "status", "priority", "notification" ], "interactionStates": ["light", "dark", "standalone", "grouped", "numeric", "labeled"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Badge needs base family identity normalized before full parity governance.", "Generated from docs/registry/families/badge/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "banner", "readmePath": "docs/registry/families/banner/README.md", "metaPath": "docs/registry/families/banner/registry.meta.json", "generatedPath": "docs/registry/families/banner/registry.generated.json", "visualPaths": [ "docs/registry/families/banner/visuals/file-map.mmd", "docs/registry/families/banner/visuals/interaction-map.mmd", "docs/registry/families/banner/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "banner", "displayName": "Banner", "status": "shipped", "summary": "Inline page-level status messaging component with five semantic intents, optional icon, CTA action slot, and dismiss button.", "philosophy": [ "Banner is for persistent, page-level status messages. Use Toast for transient feedback.", "Keep the component token-driven — variant controls surface, border, and icon color through CSS custom properties.", "Keep a11y roles honest: warning/error get assertive alert role, info/success/neutral get polite status role.", "Keep the API surface small — icon, message, action, dismiss — matching the Figma component properties directly." ], "usage": { "useWhen": [ "The UI needs a persistent, page-level message about system state, feature announcements, or required actions.", "The intent maps to one of the five semantic variants: neutral, info, success, warning, error.", "The message needs an optional CTA and/or dismiss action." ], "avoidWhen": [ "The message is transient and should auto-dismiss (use Toast instead).", "The message requires user confirmation or a blocking flow (use Dialog instead).", "The message applies to a specific form field rather than the page (use field-level validation instead)." ] }, "axe": { "riskTier": "low", "auditStatus": "queued", "automationCovers": [ "Variant-specific role and aria-live assignment in core recipe.", "Dismiss button aria-label in all adapters.", "React, Vue, and Svelte adapter tests for a11y attributes, slot visibility, and dismiss interaction." ], "manualReviewRequired": [ "Whether banner messages are concise enough for screen reader announcement.", "Whether error/warning banners actually warrant assertive live-region behavior in context." ], "roadmapAnchors": [], "notes": [] }, "visuals": { "canonicalStories": { "react": ["apps/storybook-react/src/stories/banner/banner.stories.tsx"], "vue": ["apps/storybook-vue/src/stories/banner/banner.stories.ts"], "svelte": ["apps/storybook-svelte/src/stories/banner/banner.stories.ts"] }, "preferredStates": [ "neutral", "info", "success", "warning", "error", "with-icon", "with-action", "dismissible", "light", "dark" ] }, "openQuestions": [] }, "generated": { "family": "banner", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/banner/banner-a11y.ts", "packages/core/src/components/atoms/banner/banner-recipe.ts", "packages/core/src/components/atoms/banner/banner-types.ts", "packages/core/src/components/atoms/banner/index.ts" ], "presets": ["packages/presets/src/firstEdition/banner.css"], "react": [ "packages/react/src/components/banner/__tests__/banner.test.tsx", "packages/react/src/components/banner/__tests__/contract.test.tsx", "packages/react/src/components/banner/__tests__/index-exports.test.tsx", "packages/react/src/components/banner/banner.tsx", "packages/react/src/components/banner/index.ts", "packages/react/src/components/banner/variants.tsx" ], "vue": [ "packages/vue/src/components/banner/__tests__/banner.test.ts", "packages/vue/src/components/banner/__tests__/contract.test.ts", "packages/vue/src/components/banner/banner.ts", "packages/vue/src/components/banner/index.ts", "packages/vue/src/components/banner/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/banner/Banner.svelte", "packages/svelte/src/lib/components/banner/ErrorBanner.svelte", "packages/svelte/src/lib/components/banner/index.ts", "packages/svelte/src/lib/components/banner/InfoBanner.svelte", "packages/svelte/src/lib/components/banner/SuccessBanner.svelte", "packages/svelte/src/lib/components/banner/types.ts", "packages/svelte/src/lib/components/banner/WarningBanner.svelte" ], "storybookReact": [ "apps/storybook-react/src/stories/banner/__tests__/banner-introduction-docs.test.ts", "apps/storybook-react/src/stories/banner/__tests__/banner-taxonomy.test.ts", "apps/storybook-react/src/stories/banner/banner.stories.tsx", "apps/storybook-react/src/stories/banner/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/banner/__tests__/banner-introduction-docs.test.ts", "apps/storybook-vue/src/stories/banner/__tests__/banner-taxonomy.test.ts", "apps/storybook-vue/src/stories/banner/banner.stories.ts", "apps/storybook-vue/src/stories/banner/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/banner/__tests__/banner-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/banner/__tests__/banner-taxonomy.test.ts", "apps/storybook-svelte/src/stories/banner/banner.stories.ts", "apps/storybook-svelte/src/stories/banner/BannerDarkGallery.svelte", "apps/storybook-svelte/src/stories/banner/BannerGallery.svelte", "apps/storybook-svelte/src/stories/banner/Introduction.mdx" ], "contracts": [] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "banner", "canonicalAttributes": ["data-component", "data-variant"], "allowedPurposes": ["info-banner", "success-banner", "warning-banner", "error-banner"], "purposeAttributes": { "error-banner": { "data-purpose": "error-banner", "data-intent": "error" }, "info-banner": { "data-purpose": "info-banner", "data-intent": "info" }, "success-banner": { "data-purpose": "success-banner", "data-intent": "success" }, "warning-banner": { "data-purpose": "warning-banner", "data-intent": "warning" } }, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "Banner is a single-atom family with thin purpose variants that preset the variant prop and emit canonical data-purpose metadata." ] }, "design": { "componentJsons": [".figma/marwes/components/banner.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-banner/-banner_1593-5094.json", ".figma/marwes/pages/-banner/-banner-dark_2444-2179.json", ".figma/marwes/pages/-banner/overall-status_1730-4164.json", ".figma/marwes/pages/-banner/examples_1593-7192.json" ], "nodeReferences": { "bannerComponent": "1593:5080", "bannerLightFrame": "1593:5094", "bannerDarkFrame": "2444:2179" }, "figmaTokens": ["banner/surface", "banner/border", "banner/icon"], "figmaStates": { "baseVariants": ["neutral", "info", "success", "warning", "error"], "interactionStates": [ "light", "dark", "with-icon", "without-icon", "with-cta", "dismissible" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Banner is a single-atom family with thin purpose variants that preset the variant prop and emit canonical data-purpose metadata.", "Generated from docs/registry/families/banner/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "breadcrumb", "readmePath": "docs/registry/families/breadcrumb/README.md", "metaPath": "docs/registry/families/breadcrumb/registry.meta.json", "generatedPath": "docs/registry/families/breadcrumb/registry.generated.json", "visualPaths": [ "docs/registry/families/breadcrumb/visuals/file-map.mmd", "docs/registry/families/breadcrumb/visuals/interaction-map.mmd", "docs/registry/families/breadcrumb/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "breadcrumb", "displayName": "Breadcrumb", "status": "shipped", "summary": "Navigation hierarchy atom with optional home entry, current-page metadata, hidden separators, and shared nav/list semantics across adapters.", "philosophy": [ "Keep Breadcrumb focused on representing page hierarchy while routing and link resolution stay product-owned.", "Keep the current item explicit through aria-current so visual state and screen-reader state remain aligned.", "Use the synced Figma breadcrumb component and item/separator parts as the compact visual baseline." ], "usage": { "useWhen": [ "A page needs to show its location inside a broader hierarchy.", "The current page should be announced as the current breadcrumb item.", "React, Vue, and Svelte consumers need the same nav/list/separator semantics." ], "avoidWhen": [ "The UI needs primary site navigation rather than location context.", "The hierarchy cannot identify a truthful current page.", "Routing behavior, link resolution, or page ownership is still unclear." ] }, "axe": { "riskTier": "low", "auditStatus": "queued", "automationCovers": [ "Core and adapter tests for nav/list structure, home entry, current item metadata, and separator hiding.", "Storybook introduction and taxonomy tests in React, Vue, and Svelte apps." ], "manualReviewRequired": [ "Visual review against the synced light and dark Figma breadcrumb frames.", "Product-level review that the current item, page title, and URL hierarchy match." ], "roadmapAnchors": [], "notes": [ "Breadcrumb is covered by the canonical family semantic registry with data-component=breadcrumb." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/breadcrumb/Introduction.mdx", "apps/storybook-react/src/stories/breadcrumb/breadcrumb.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/breadcrumb/Introduction.mdx", "apps/storybook-vue/src/stories/breadcrumb/breadcrumb.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/breadcrumb/Introduction.mdx", "apps/storybook-svelte/src/stories/breadcrumb/breadcrumb.stories.ts" ] }, "preferredStates": [ "home", "link-item", "current-page", "separator", "hover", "focus", "light", "dark" ] }, "openQuestions": [ "Should a future managed breadcrumb helper infer the current item from router state, or should routing remain fully product-owned?" ] }, "generated": { "family": "breadcrumb", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/breadcrumb/breadcrumb-a11y.ts", "packages/core/src/components/atoms/breadcrumb/breadcrumb-recipe.ts", "packages/core/src/components/atoms/breadcrumb/breadcrumb-types.ts", "packages/core/src/components/atoms/breadcrumb/index.ts" ], "presets": ["packages/presets/src/firstEdition/breadcrumb.css"], "react": [ "packages/react/src/components/breadcrumb/__tests__/breadcrumb.test.tsx", "packages/react/src/components/breadcrumb/breadcrumb.tsx", "packages/react/src/components/breadcrumb/index.ts" ], "vue": [ "packages/vue/src/components/breadcrumb/__tests__/breadcrumb.test.ts", "packages/vue/src/components/breadcrumb/breadcrumb.ts", "packages/vue/src/components/breadcrumb/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/breadcrumb/Breadcrumb.svelte", "packages/svelte/src/lib/components/breadcrumb/index.ts", "packages/svelte/src/lib/components/breadcrumb/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/breadcrumb/__tests__/breadcrumb-introduction-docs.test.ts", "apps/storybook-react/src/stories/breadcrumb/__tests__/breadcrumb-taxonomy.test.ts", "apps/storybook-react/src/stories/breadcrumb/breadcrumb.stories.tsx", "apps/storybook-react/src/stories/breadcrumb/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/breadcrumb/__tests__/breadcrumb-introduction-docs.test.ts", "apps/storybook-vue/src/stories/breadcrumb/__tests__/breadcrumb-taxonomy.test.ts", "apps/storybook-vue/src/stories/breadcrumb/breadcrumb.stories.ts", "apps/storybook-vue/src/stories/breadcrumb/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/breadcrumb/__tests__/breadcrumb-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/breadcrumb/__tests__/breadcrumb-taxonomy.test.ts", "apps/storybook-svelte/src/stories/breadcrumb/breadcrumb.stories.ts", "apps/storybook-svelte/src/stories/breadcrumb/BreadcrumbButtonBacked.svelte", "apps/storybook-svelte/src/stories/breadcrumb/BreadcrumbPreview.svelte", "apps/storybook-svelte/src/stories/breadcrumb/BreadcrumbShowcase.svelte", "apps/storybook-svelte/src/stories/breadcrumb/Introduction.mdx" ], "contracts": [] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "breadcrumb", "canonicalAttributes": ["data-component"], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "Breadcrumb exposes navigation hierarchy while routing, link resolution, and page ownership stay consumer-owned." ] }, "design": { "componentJsons": [ ".figma/marwes/components/breadcrumb.json", ".figma/marwes/components/partsbreadcrumbbreadcrumb-item.json", ".figma/marwes/components/partsbreadcrumbbreadcrumb-separator.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-breadcrumb/-breadcrumb_1574-27193.json", ".figma/marwes/pages/-breadcrumb/-breadcrumb-dark_1574-27268.json", ".figma/marwes/pages/-breadcrumb/component-container_1592-2744.json" ], "nodeReferences": { "breadcrumbComponent": "1574:26965", "breadcrumbItemComponent": "1574:26960", "breadcrumbSeparatorComponent": "1574:26962", "breadcrumbLightFrame": "1574:27193", "breadcrumbDarkFrame": "1574:27268", "breadcrumbContainer": "1592:2744" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["home", "link-item", "separator", "current-page"], "interactionStates": ["light", "dark", "hover", "focus", "current"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Breadcrumb exposes navigation hierarchy while routing, link resolution, and page ownership stay consumer-owned.", "Generated from docs/registry/families/breadcrumb/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "button", "readmePath": "docs/registry/families/button/README.md", "metaPath": "docs/registry/families/button/registry.meta.json", "generatedPath": "docs/registry/families/button/registry.generated.json", "visualPaths": [ "docs/registry/families/button/visuals/file-map.mmd", "docs/registry/families/button/visuals/interaction-map.mmd", "docs/registry/families/button/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "button", "displayName": "Button", "status": "shipped", "summary": "Semantic-first action family with a base Button atom, visual wrappers, and purpose wrappers for canonical workflows.", "philosophy": [ "Teach purpose wrappers first and keep the base Button as the deliberate escape hatch.", "Keep semantics and accessibility rules in core so React, Vue, and Svelte emit the same contract.", "Use button names and wrappers to make intent self-documenting in product code.", "Treat AXE follow-up work as governance hardening, not as a reason to replace the Button architecture." ], "usage": { "useWhen": [ "The UI needs a canonical action trigger with clear semantic intent.", "A product flow matches one of the purpose wrappers such as submit, cancel, save, or destructive.", "The implementation should stay aligned across React, Vue, and Svelte through the shared core contract." ], "avoidWhen": [ "A plain navigational link with native link semantics is the better fit than an action button.", "The design is only trying to mimic a button visually without needing button semantics.", "The product team cannot explain the action intent clearly enough to choose a stable purpose or action." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared React, Vue, and Svelte contract coverage through tests/contracts/button.contract.ts.", "Loading-state semantics such as aria-busy and disabled behavior.", "Native link semantics for active LinkButton paths and disabled/loading anchor fallback behavior.", "Dev-time warning for icon-only buttons without an accessible name path.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Product-level choice between navigation links and action buttons.", "Cases where a plain inline text link is the more honest UI than a button-family surface." ], "roadmapAnchors": ["AXE_ROADMAP.md#button-semantics-cleanup"], "notes": [ "Button completed a first-pass accessibility audit focused on the action-vs-navigation semantics boundary.", "The original open AXE follow-up is now resolved at the family-policy level, while broader gating and support-model work remains cross-cutting." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/button/button.stories.tsx", "apps/storybook-react/src/stories/button/submit-button.stories.tsx", "apps/storybook-react/src/stories/button/link-button.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/button/button.stories.ts", "apps/storybook-vue/src/stories/button/submit-button.stories.ts", "apps/storybook-vue/src/stories/button/link-button.stories.ts" ] }, "preferredStates": ["default", "hover", "pressed", "disabled", "focus", "loading"] }, "openQuestions": [ "Which Button-family stories should join the first automated accessibility smoke set?" ] }, "generated": { "family": "button", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/button-family-accessibility.md"], "roadmap": ["AXE_ROADMAP.md#button-semantics-cleanup"], "core": [ "packages/core/src/components/atoms/button/button-a11y.ts", "packages/core/src/components/atoms/button/button-loading.ts", "packages/core/src/components/atoms/button/button-recipe.ts", "packages/core/src/components/atoms/button/button-types.ts", "packages/core/src/components/atoms/button/index.ts" ], "presets": ["packages/presets/src/firstEdition/button.css"], "react": [ "packages/react/src/components/button/__tests__/button.test.tsx", "packages/react/src/components/button/__tests__/index-exports.test.tsx", "packages/react/src/components/button/__tests__/purpose-button-locking.test.tsx", "packages/react/src/components/button/button.tsx", "packages/react/src/components/button/icon-button.tsx", "packages/react/src/components/button/index.ts", "packages/react/src/components/button/variants.tsx" ], "vue": [ "packages/vue/src/components/button/__tests__/button.test.ts", "packages/vue/src/components/button/__tests__/index-exports.test.ts", "packages/vue/src/components/button/__tests__/purpose-button-locking.test.ts", "packages/vue/src/components/button/button.ts", "packages/vue/src/components/button/icon-button.ts", "packages/vue/src/components/button/index.ts", "packages/vue/src/components/button/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/button/Button.svelte", "packages/svelte/src/lib/components/button/CancelButton.svelte", "packages/svelte/src/lib/components/button/CloseButton.svelte", "packages/svelte/src/lib/components/button/ConfirmButton.svelte", "packages/svelte/src/lib/components/button/CopyButton.svelte", "packages/svelte/src/lib/components/button/CreateButton.svelte", "packages/svelte/src/lib/components/button/DestructiveButton.svelte", "packages/svelte/src/lib/components/button/DownloadButton.svelte", "packages/svelte/src/lib/components/button/DropdownButton.svelte", "packages/svelte/src/lib/components/button/EditButton.svelte", "packages/svelte/src/lib/components/button/FilterButton.svelte", "packages/svelte/src/lib/components/button/IconButton.svelte", "packages/svelte/src/lib/components/button/index.ts", "packages/svelte/src/lib/components/button/LinkButton.svelte", "packages/svelte/src/lib/components/button/PrimaryButton.svelte", "packages/svelte/src/lib/components/button/RefreshButton.svelte", "packages/svelte/src/lib/components/button/SaveButton.svelte", "packages/svelte/src/lib/components/button/SearchButton.svelte", "packages/svelte/src/lib/components/button/SecondaryButton.svelte", "packages/svelte/src/lib/components/button/SortButton.svelte", "packages/svelte/src/lib/components/button/SubmitButton.svelte", "packages/svelte/src/lib/components/button/SuccessButton.svelte", "packages/svelte/src/lib/components/button/TextButton.svelte", "packages/svelte/src/lib/components/button/types.ts", "packages/svelte/src/lib/components/button/UploadButton.svelte", "packages/svelte/src/lib/components/button/VerifyButton.svelte" ], "storybookReact": [ "apps/storybook-react/src/stories/button/__tests__/button-introduction-docs.test.ts", "apps/storybook-react/src/stories/button/__tests__/button-taxonomy.test.ts", "apps/storybook-react/src/stories/button/button.stories.tsx", "apps/storybook-react/src/stories/button/cancel-button.stories.tsx", "apps/storybook-react/src/stories/button/close-button.stories.tsx", "apps/storybook-react/src/stories/button/confirm-button.stories.tsx", "apps/storybook-react/src/stories/button/copy-button.stories.tsx", "apps/storybook-react/src/stories/button/create-button.stories.tsx", "apps/storybook-react/src/stories/button/destructive-button.stories.tsx", "apps/storybook-react/src/stories/button/download-button.stories.tsx", "apps/storybook-react/src/stories/button/dropdown-button.stories.tsx", "apps/storybook-react/src/stories/button/edit-button.stories.tsx", "apps/storybook-react/src/stories/button/filter-button.stories.tsx", "apps/storybook-react/src/stories/button/icon-button.stories.tsx", "apps/storybook-react/src/stories/button/Introduction.mdx", "apps/storybook-react/src/stories/button/link-button.stories.tsx", "apps/storybook-react/src/stories/button/primary-button.stories.tsx", "apps/storybook-react/src/stories/button/refresh-button.stories.tsx", "apps/storybook-react/src/stories/button/save-button.stories.tsx", "apps/storybook-react/src/stories/button/search-button.stories.tsx", "apps/storybook-react/src/stories/button/secondary-button.stories.tsx", "apps/storybook-react/src/stories/button/sort-button.stories.tsx", "apps/storybook-react/src/stories/button/submit-button.stories.tsx", "apps/storybook-react/src/stories/button/success-button.stories.tsx", "apps/storybook-react/src/stories/button/text-button.stories.tsx", "apps/storybook-react/src/stories/button/upload-button.stories.tsx", "apps/storybook-react/src/stories/button/verify-button.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/button/__tests__/button-introduction-docs.test.ts", "apps/storybook-vue/src/stories/button/__tests__/button-taxonomy.test.ts", "apps/storybook-vue/src/stories/button/button.stories.ts", "apps/storybook-vue/src/stories/button/cancel-button.stories.ts", "apps/storybook-vue/src/stories/button/close-button.stories.ts", "apps/storybook-vue/src/stories/button/confirm-button.stories.ts", "apps/storybook-vue/src/stories/button/copy-button.stories.ts", "apps/storybook-vue/src/stories/button/create-button.stories.ts", "apps/storybook-vue/src/stories/button/destructive-button.stories.ts", "apps/storybook-vue/src/stories/button/download-button.stories.ts", "apps/storybook-vue/src/stories/button/dropdown-button.stories.ts", "apps/storybook-vue/src/stories/button/edit-button.stories.ts", "apps/storybook-vue/src/stories/button/filter-button.stories.ts", "apps/storybook-vue/src/stories/button/icon-button.stories.ts", "apps/storybook-vue/src/stories/button/Introduction.mdx", "apps/storybook-vue/src/stories/button/link-button.stories.ts", "apps/storybook-vue/src/stories/button/primary-button.stories.ts", "apps/storybook-vue/src/stories/button/refresh-button.stories.ts", "apps/storybook-vue/src/stories/button/save-button.stories.ts", "apps/storybook-vue/src/stories/button/search-button.stories.ts", "apps/storybook-vue/src/stories/button/secondary-button.stories.ts", "apps/storybook-vue/src/stories/button/sort-button.stories.ts", "apps/storybook-vue/src/stories/button/submit-button.stories.ts", "apps/storybook-vue/src/stories/button/success-button.stories.ts", "apps/storybook-vue/src/stories/button/text-button.stories.ts", "apps/storybook-vue/src/stories/button/upload-button.stories.ts", "apps/storybook-vue/src/stories/button/verify-button.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/button/__tests__/button-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/button/__tests__/button-taxonomy.test.ts", "apps/storybook-svelte/src/stories/button/button.stories.ts", "apps/storybook-svelte/src/stories/button/cancel-button.stories.ts", "apps/storybook-svelte/src/stories/button/close-button.stories.ts", "apps/storybook-svelte/src/stories/button/confirm-button.stories.ts", "apps/storybook-svelte/src/stories/button/copy-button.stories.ts", "apps/storybook-svelte/src/stories/button/create-button.stories.ts", "apps/storybook-svelte/src/stories/button/destructive-button.stories.ts", "apps/storybook-svelte/src/stories/button/download-button.stories.ts", "apps/storybook-svelte/src/stories/button/dropdown-button.stories.ts", "apps/storybook-svelte/src/stories/button/edit-button.stories.ts", "apps/storybook-svelte/src/stories/button/filter-button.stories.ts", "apps/storybook-svelte/src/stories/button/icon-button.stories.ts", "apps/storybook-svelte/src/stories/button/Introduction.mdx", "apps/storybook-svelte/src/stories/button/link-button.stories.ts", "apps/storybook-svelte/src/stories/button/primary-button.stories.ts", "apps/storybook-svelte/src/stories/button/refresh-button.stories.ts", "apps/storybook-svelte/src/stories/button/save-button.stories.ts", "apps/storybook-svelte/src/stories/button/search-button.stories.ts", "apps/storybook-svelte/src/stories/button/secondary-button.stories.ts", "apps/storybook-svelte/src/stories/button/sort-button.stories.ts", "apps/storybook-svelte/src/stories/button/submit-button.stories.ts", "apps/storybook-svelte/src/stories/button/success-button.stories.ts", "apps/storybook-svelte/src/stories/button/text-button.stories.ts", "apps/storybook-svelte/src/stories/button/upload-button.stories.ts", "apps/storybook-svelte/src/stories/button/verify-button.stories.ts" ], "contracts": ["tests/contracts/button.contract.ts"] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "button", "canonicalAttributes": ["data-component", "data-action", "data-variant", "data-size"], "allowedPurposes": [ "destructive", "create", "submit", "cancel", "navigation", "save", "confirm", "verify", "edit", "close", "refresh", "upload", "download", "copy", "search", "filter", "sort", "dropdown", "success" ], "purposeAttributes": { "cancel": { "data-purpose": "cancel", "data-action": "cancel" }, "close": { "data-purpose": "close", "data-action": "cancel" }, "confirm": { "data-purpose": "confirm", "data-action": "button", "data-outcome": "positive" }, "copy": { "data-purpose": "copy", "data-action": "button" }, "create": { "data-purpose": "create", "data-action": "create" }, "destructive": { "data-purpose": "destructive", "data-action": "delete", "data-destructive": "true", "data-confirmation-required": "true" }, "download": { "data-purpose": "download", "data-action": "button" }, "dropdown": { "data-purpose": "dropdown", "data-action": "button" }, "edit": { "data-purpose": "edit", "data-action": "edit" }, "filter": { "data-purpose": "filter", "data-action": "button" }, "navigation": { "data-purpose": "navigation", "data-action": "navigate" }, "refresh": { "data-purpose": "refresh", "data-action": "button" }, "save": { "data-purpose": "save", "data-action": "submit" }, "search": { "data-purpose": "search", "data-action": "button" }, "sort": { "data-purpose": "sort", "data-action": "button" }, "submit": { "data-purpose": "submit", "data-action": "submit", "data-context": "form-submit" }, "success": { "data-purpose": "success", "data-action": "button", "data-outcome": "positive" }, "upload": { "data-purpose": "upload", "data-action": "button" }, "verify": { "data-purpose": "verify", "data-action": "button", "data-outcome": "positive" } }, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": ["Button already has the strongest base semantic surface in core."] }, "design": { "componentJsons": [ ".figma/marwes/components/button.json", ".figma/marwes/components/button-destructive.json", ".figma/marwes/components/button-success.json", ".figma/marwes/components/button-group.json", ".figma/marwes/components/icon-button.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/------playground---dashboard/buttons_2832-30431.json", ".figma/marwes/pages/-button/component-container_1364-11870.json", ".figma/marwes/pages/-button/-button_1371-11172.json", ".figma/marwes/pages/-button/-button-dark_1371-11537.json", ".figma/marwes/pages/-button/-purpose-buttons_1371-8933.json", ".figma/marwes/pages/-button/-purpose-buttons-dark_1371-9188.json" ], "nodeReferences": { "baseLightFrame": "1371:11172", "baseDarkFrame": "1371:11537", "purposeLightFrame": "1371:8933", "purposeDarkFrame": "1371:9188" }, "figmaTokens": [ "button/primary/surface", "button/primary/label", "button/secondary/label", "button/secondary/outline", "button/text/label", "button/gap", "button/paddingH", "button/paddingV" ], "figmaStates": { "baseVariants": ["primary", "secondary", "neutral", "text"], "interactionStates": ["default", "hover", "pressed", "disabled", "focus", "loading"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Button already has the strongest base semantic surface in core.", "Generated from docs/registry/families/button/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "card", "readmePath": "docs/registry/families/card/README.md", "metaPath": "docs/registry/families/card/registry.meta.json", "generatedPath": "docs/registry/families/card/registry.generated.json", "visualPaths": [ "docs/registry/families/card/visuals/file-map.mmd", "docs/registry/families/card/visuals/interaction-map.mmd", "docs/registry/families/card/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "card", "displayName": "Card", "status": "shipped", "summary": "Family-local surface-container family with a raw Card atom and thin purpose-card wrappers for product, profile, and stat summaries.", "philosophy": [ "Teach purpose cards first when the product meaning is known and keep the raw Card atom as the flexible surface primitive.", "Keep the base card non-interactive and composition-friendly rather than letting card styling imply button or link semantics on its own.", "Keep local card metadata honest: the atom emits stable data-component output from core, while purpose-card metadata lives in the adapters today.", "Treat the current Figma page as the visual baseline for container states, while Storybook and product code own the meaning of the purpose wrappers." ], "usage": { "useWhen": [ "The UI needs a bordered content surface with optional title and flexible body composition.", "The product flow clearly maps to ProductCard, ProfileCard, or StatCard and benefits from local purpose metadata.", "The team wants React, Vue, and Svelte card rendering to stay aligned through one simple core recipe and shared Storybook teaching surfaces." ], "avoidWhen": [ "The surface is really an interactive tile, navigation link, or button-like control that should own explicit interactive semantics.", "The layout needs richer substructure such as actions, dismiss behavior, notifications, or multi-region shells beyond the current card atom contract.", "The team expects the exploratory notification-card design material to be part of the shipped Card family today." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for the stable card class, data-component marker, and custom data-attribute merging.", "Local React and Vue atom tests for title/body rendering and outer-element passthrough behavior.", "Storybook introduction and taxonomy tests in both apps for atom and purpose-story coverage." ], "manualReviewRequired": [ "Product-level judgment about when a card should stay passive versus becoming a real interactive control with button or link semantics.", "Whether purpose-card wrappers stay honest summaries instead of absorbing richer behavior that belongs in a different family.", "Any future expansion toward notification-card or richer shell patterns beyond the current simple surface container." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Card completed a first-pass accessibility audit focused on shared contract maturity, passive-surface guidance, and honest title semantics.", "The family now has a shared card contract and explicit docs about the title-as-span constraint plus the interactive-card anti-pattern." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/card/Introduction.mdx", "apps/storybook-react/src/stories/card/card.stories.tsx", "apps/storybook-react/src/stories/card/product-card.stories.tsx", "apps/storybook-react/src/stories/card/profile-card.stories.tsx", "apps/storybook-react/src/stories/card/stat-card.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/card/Introduction.mdx", "apps/storybook-vue/src/stories/card/card.stories.ts", "apps/storybook-vue/src/stories/card/product-card.stories.ts", "apps/storybook-vue/src/stories/card/profile-card.stories.ts", "apps/storybook-vue/src/stories/card/stat-card.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/card/Introduction.mdx", "apps/storybook-svelte/src/stories/card/card.stories.ts", "apps/storybook-svelte/src/stories/card/product-card.stories.ts", "apps/storybook-svelte/src/stories/card/profile-card.stories.ts", "apps/storybook-svelte/src/stories/card/stat-card.stories.ts" ] }, "preferredStates": [ "default", "hover", "pressed", "disabled", "focus", "body-only", "product-card", "profile-card", "stat-card", "light", "dark" ] }, "openQuestions": [ "Should Card eventually gain a shared tests/contracts card contract file, or is the current local test coverage enough for this low-risk family?", "If teams need richer notification or alert surfaces, should that become a separate family instead of expanding the current passive Card contract?" ] }, "generated": { "family": "card", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/card-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/card/card-recipe.ts", "packages/core/src/components/atoms/card/card-types.ts", "packages/core/src/components/atoms/card/index.ts" ], "presets": ["packages/presets/src/firstEdition/card.css"], "react": [ "packages/react/src/components/card/__tests__/card.test.tsx", "packages/react/src/components/card/card.tsx", "packages/react/src/components/card/index.ts", "packages/react/src/components/card/variants.tsx" ], "vue": [ "packages/vue/src/components/card/__tests__/card.test.ts", "packages/vue/src/components/card/card.ts", "packages/vue/src/components/card/index.ts", "packages/vue/src/components/card/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/card/Card.svelte", "packages/svelte/src/lib/components/card/index.ts", "packages/svelte/src/lib/components/card/ProductCard.svelte", "packages/svelte/src/lib/components/card/ProfileCard.svelte", "packages/svelte/src/lib/components/card/StatCard.svelte", "packages/svelte/src/lib/components/card/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/card/__tests__/card-introduction-docs.test.ts", "apps/storybook-react/src/stories/card/__tests__/card-taxonomy.test.ts", "apps/storybook-react/src/stories/card/card.stories.tsx", "apps/storybook-react/src/stories/card/Introduction.mdx", "apps/storybook-react/src/stories/card/product-card.stories.tsx", "apps/storybook-react/src/stories/card/profile-card.stories.tsx", "apps/storybook-react/src/stories/card/stat-card.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/card/__tests__/card-introduction-docs.test.ts", "apps/storybook-vue/src/stories/card/__tests__/card-taxonomy.test.ts", "apps/storybook-vue/src/stories/card/card.stories.ts", "apps/storybook-vue/src/stories/card/Introduction.mdx", "apps/storybook-vue/src/stories/card/product-card.stories.ts", "apps/storybook-vue/src/stories/card/profile-card.stories.ts", "apps/storybook-vue/src/stories/card/stat-card.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/card/__tests__/card-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/card/card.stories.ts", "apps/storybook-svelte/src/stories/card/CardRichContent.svelte", "apps/storybook-svelte/src/stories/card/CardStateMatrix.svelte", "apps/storybook-svelte/src/stories/card/Introduction.mdx", "apps/storybook-svelte/src/stories/card/product-card.stories.ts", "apps/storybook-svelte/src/stories/card/profile-card.stories.ts", "apps/storybook-svelte/src/stories/card/stat-card.stories.ts" ], "contracts": [] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "card", "canonicalAttributes": [], "allowedPurposes": ["product-card", "profile-card", "stat-card"], "purposeAttributes": { "product-card": { "data-purpose": "product-card" }, "profile-card": { "data-purpose": "profile-card" }, "stat-card": { "data-purpose": "stat-card" } }, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/card/card-recipe.ts", "packages/react/src/components/card/variants.tsx", "packages/vue/src/components/card/variants.ts" ], "notes": [ "Card is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=card from core, while purpose-card metadata currently lives in the React and Vue wrappers." ] }, "design": { "componentJsons": [".figma/marwes/components/card.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-card/README.md" ], "pageReferences": [ ".figma/marwes/pages/-card/-card_1364-11556.json", ".figma/marwes/pages/-card/component-container_1371-13326.json", ".figma/marwes/pages/-card/-card-dark_1368-5891.json" ], "nodeReferences": { "cardComponent": "1364:7718", "cardLightFrame": "1364:11556", "cardDarkFrame": "1368:5891", "cardComponentContainer": "1371:13326" }, "figmaTokens": ["card/surface", "card/border", "card/title", "card/body"], "figmaStates": { "baseVariants": ["card", "product-card", "profile-card", "stat-card"], "interactionStates": [ "default", "hover", "pressed", "disabled", "focus", "light", "dark", "body-only" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Card is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=card from core, while purpose-card metadata currently lives in the React and Vue wrappers.", "Generated from docs/registry/families/card/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "checkbox", "readmePath": "docs/registry/families/checkbox/README.md", "metaPath": "docs/registry/families/checkbox/registry.meta.json", "generatedPath": "docs/registry/families/checkbox/registry.generated.json", "visualPaths": [ "docs/registry/families/checkbox/visuals/file-map.mmd", "docs/registry/families/checkbox/visuals/interaction-map.mmd", "docs/registry/families/checkbox/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "checkbox", "displayName": "Checkbox", "status": "shipped", "summary": "Native checkbox family with one raw Checkbox atom, two field-level molecules, and shared React/Vue contracts for atom and grouped multi-select behavior.", "philosophy": [ "Teach CheckboxField and CheckboxGroupField as the canonical labeled paths, and keep raw Checkbox as the low-level escape hatch.", "Keep native input and fieldset semantics as the real contract instead of inventing Marwes metadata where standard HTML already expresses the meaning honestly.", "Treat indeterminate as an explicit controlled-state affordance for select-all flows, not as a separate durable selection state.", "Keep single-field and grouped-field accessibility wiring source-owned in shared field helpers so React and Vue stay aligned." ], "usage": { "useWhen": [ "The UI needs one or more native checkbox controls with optional description or error support.", "The product wants the canonical labeled path for a single checkbox or a multi-select checkbox group without rebuilding the field wiring manually.", "The team wants React and Vue checkbox behavior to stay aligned through one core recipe, shared field helpers, and shared contract files." ], "avoidWhen": [ "A switch, radio group, or always-on content toggle would be the more honest interaction model.", "The layout only needs a decorative checkmark treatment and does not represent a real form control.", "The team expects a purpose-wrapper or semantic-metadata layer that the current Checkbox family does not ship." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for controlled versus uncontrolled state output on the raw checkbox atom.", "Shared checkbox and checkbox-field contracts across React and Vue for checked state, single-field naming, description/error wiring, invalid state, and disabled forwarding.", "Shared checkbox-group-field contracts across React and Vue for group labeling, description wiring, error wiring, invalid propagation, and indeterminate support.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Product-level judgment about when a select-all checkbox should become indeterminate and whether that behavior stays truthful in real flows.", "Real browser review for focus visibility and appearance consistency because the family resets native checkbox appearance heavily in CSS.", "Whether label, helper text, and error wording stay clear when groups get long or validation messages become more complex." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Checkbox completed a first-pass accessibility audit focused on single-field contract maturity and native-first field wiring.", "The family now has shared contracts for the raw atom, single-field molecule, and grouped molecule across React and Vue." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/checkbox/Introduction.mdx", "apps/storybook-react/src/stories/checkbox/checkbox-field.stories.tsx", "apps/storybook-react/src/stories/checkbox/checkbox-group-field.stories.tsx", "apps/storybook-react/src/stories/checkbox/checkbox.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/checkbox/Introduction.mdx", "apps/storybook-vue/src/stories/checkbox/checkbox-field.stories.ts", "apps/storybook-vue/src/stories/checkbox/checkbox-group-field.stories.ts", "apps/storybook-vue/src/stories/checkbox/checkbox.stories.ts" ] }, "preferredStates": [ "unchecked", "checked", "indeterminate", "default", "hover", "pressed", "disabled", "focus", "error", "single-field", "group-field", "light", "dark" ] }, "openQuestions": [ "Which Checkbox-family stories should join the first automated accessibility smoke set?", "Should the local Figma sync gain clearer molecule-level CheckboxField and CheckboxGroupField refs that mirror the shipped helper-text and error behavior more directly?" ] }, "generated": { "family": "checkbox", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/checkbox-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/checkbox/checkbox-a11y.ts", "packages/core/src/components/atoms/checkbox/checkbox-recipe.ts", "packages/core/src/components/atoms/checkbox/checkbox-types.ts", "packages/core/src/components/atoms/checkbox/index.ts" ], "presets": [ "packages/presets/src/firstEdition/checkbox.css", "packages/presets/src/firstEdition/molecules/checkbox-field.css", "packages/presets/src/firstEdition/molecules/checkbox-group-field.css" ], "react": [ "packages/react/src/components/checkbox/__tests__/checkbox-field.test.tsx", "packages/react/src/components/checkbox/__tests__/checkbox-group-field.test.tsx", "packages/react/src/components/checkbox/__tests__/checkbox.test.tsx", "packages/react/src/components/checkbox/checkbox-field.tsx", "packages/react/src/components/checkbox/checkbox-group-field.tsx", "packages/react/src/components/checkbox/checkbox.tsx", "packages/react/src/components/checkbox/index.ts" ], "vue": [ "packages/vue/src/components/checkbox/__tests__/checkbox-field.test.ts", "packages/vue/src/components/checkbox/__tests__/checkbox-group-field.test.ts", "packages/vue/src/components/checkbox/__tests__/checkbox.test.ts", "packages/vue/src/components/checkbox/checkbox-field.ts", "packages/vue/src/components/checkbox/checkbox-group-field.ts", "packages/vue/src/components/checkbox/checkbox.ts", "packages/vue/src/components/checkbox/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/checkbox/Checkbox.svelte", "packages/svelte/src/lib/components/checkbox/CheckboxField.svelte", "packages/svelte/src/lib/components/checkbox/CheckboxGroupField.svelte", "packages/svelte/src/lib/components/checkbox/index.ts", "packages/svelte/src/lib/components/checkbox/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/checkbox/__tests__/checkbox-introduction-docs.test.ts", "apps/storybook-react/src/stories/checkbox/__tests__/checkbox-taxonomy.test.ts", "apps/storybook-react/src/stories/checkbox/checkbox-field.stories.tsx", "apps/storybook-react/src/stories/checkbox/checkbox-group-field.stories.tsx", "apps/storybook-react/src/stories/checkbox/checkbox.stories.tsx", "apps/storybook-react/src/stories/checkbox/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/checkbox/__tests__/checkbox-introduction-docs.test.ts", "apps/storybook-vue/src/stories/checkbox/__tests__/checkbox-taxonomy.test.ts", "apps/storybook-vue/src/stories/checkbox/checkbox-field.stories.ts", "apps/storybook-vue/src/stories/checkbox/checkbox-group-field.stories.ts", "apps/storybook-vue/src/stories/checkbox/checkbox.stories.ts", "apps/storybook-vue/src/stories/checkbox/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/checkbox/__tests__/checkbox-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/checkbox/checkbox-field.stories.ts", "apps/storybook-svelte/src/stories/checkbox/checkbox-group-field.stories.ts", "apps/storybook-svelte/src/stories/checkbox/checkbox.stories.ts", "apps/storybook-svelte/src/stories/checkbox/CheckboxShowcase.svelte", "apps/storybook-svelte/src/stories/checkbox/Introduction.mdx" ], "contracts": [ "tests/contracts/checkbox.contract.ts", "tests/contracts/checkbox-group-field.contract.ts" ] }, "semantics": { "coverageLevel": "none", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/checkbox/checkbox-a11y.ts", "packages/core/src/components/atoms/checkbox/checkbox-recipe.ts", "packages/core/src/shared/field-helpers.ts", "packages/react/src/components/checkbox/checkbox-field.tsx", "packages/react/src/components/checkbox/checkbox-group-field.tsx", "packages/vue/src/components/checkbox/checkbox-field.ts", "packages/vue/src/components/checkbox/checkbox-group-field.ts", "tests/contracts/checkbox.contract.ts", "tests/contracts/checkbox-group-field.contract.ts" ], "notes": [ "Checkbox relies on native input[type=checkbox] and fieldset semantics rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; semantic meaning comes from the native checkbox control plus field-helper wiring in CheckboxField and CheckboxGroupField." ] }, "design": { "componentJsons": [ ".figma/marwes/components/checkbox.json", ".figma/marwes/components/checkbox-field.json", ".figma/marwes/components/checkbox-group.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-checkbox/README.md" ], "pageReferences": [ ".figma/marwes/pages/-checkbox/component-container_1369-4657.json", ".figma/marwes/pages/-checkbox/component-container_1369-6165.json", ".figma/marwes/pages/-checkbox/-checkbox_1369-4700.json", ".figma/marwes/pages/-checkbox/-checkbox-dark_2542-28177.json" ], "nodeReferences": { "checkboxComponentSet": "1369:4628", "checkboxFieldComponentSet": "1364:5566", "checkboxGroupComponent": "1369:4673", "checkboxLightFrame": "1369:4700", "checkboxDarkFrame": "2542:28177", "checkboxComponentContainer": "1369:4657", "checkboxGroupComponentContainer": "1369:6165" }, "figmaTokens": [ "Checkbox/Surface", "Checkbox/Border", "Checkbox/Surface-checked", "Checkbox/Icon", "Checkbox/Text" ], "figmaStates": { "baseVariants": ["checkbox", "checkbox-field", "checkbox-group"], "interactionStates": [ "unchecked", "checked", "indeterminate", "default", "hover", "pressed", "disabled", "focus", "error", "light", "dark" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Checkbox relies on native input[type=checkbox] and fieldset semantics rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; semantic meaning comes from the native checkbox control plus field-helper wiring in CheckboxField and CheckboxGroupField.", "Generated from docs/registry/families/checkbox/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "context-menu", "readmePath": "docs/registry/families/context-menu/README.md", "metaPath": "docs/registry/families/context-menu/registry.meta.json", "generatedPath": "docs/registry/families/context-menu/registry.generated.json", "visualPaths": [ "docs/registry/families/context-menu/visuals/file-map.mmd", "docs/registry/families/context-menu/visuals/interaction-map.mmd", "docs/registry/families/context-menu/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "context-menu", "displayName": "ContextMenu", "status": "shipped", "summary": "Compact action-list atom with a menu shell, button-backed items, icon slots, dividers, disabled state, and destructive action styling.", "philosophy": [ "Keep ContextMenu focused on the menu surface and items while parent code owns opening, closing, focus return, and positioning.", "Keep items button-backed so actions remain natively focusable and disabled items cannot dispatch selection.", "Use the synced Figma context-menu component as the visual baseline for dimensions, spacing, typography, borders, and grouped dividers." ], "usage": { "useWhen": [ "The UI needs a compact grouped list of secondary actions.", "Actions benefit from leading icons and a small menu surface.", "The product already owns the trigger, popover positioning, and menu visibility state." ], "avoidWhen": [ "The UI needs a full popover primitive with collision-aware positioning.", "The choices are form values rather than commands; use a select or dropdown field instead.", "The menu would contain complex forms or long-form content rather than short actions." ] }, "axe": { "riskTier": "medium", "auditStatus": "initial-implementation", "automationCovers": [ "Core recipe tests for menu semantics, item/divider render kits, disabled state, and destructive metadata.", "React and Vue adapter tests for menuitem rendering and disabled click behavior.", "Storybook introduction and taxonomy tests in React, Vue, and Svelte apps." ], "manualReviewRequired": [ "End-to-end product composition where a trigger opens the menu and returns focus after close.", "Keyboard behavior for any future managed popover/menu-button composition.", "Visual review against the light and dark Figma context-menu frames." ], "roadmapAnchors": [], "notes": [ "This component intentionally does not provide popover positioning or open-state management.", "The atom exposes menu/menuitem semantics; richer menu-button behavior should be added as a separate managed composition if needed." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/context-menu/Introduction.mdx", "apps/storybook-react/src/stories/context-menu/context-menu.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/context-menu/Introduction.mdx", "apps/storybook-vue/src/stories/context-menu/context-menu.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/context-menu/Introduction.mdx", "apps/storybook-svelte/src/stories/context-menu/context-menu.stories.ts" ] }, "preferredStates": [ "default", "grouped", "divider", "disabled", "destructive", "light", "dark" ] }, "openQuestions": [ "Should a future ContextMenuButton molecule own trigger state, positioning, roving focus, and focus return?", "Should destructive context-menu items eventually map into shared button action semantics or stay family-local?" ] }, "generated": { "family": "context-menu", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/context-menu/context-menu-a11y.ts", "packages/core/src/components/atoms/context-menu/context-menu-recipe.ts", "packages/core/src/components/atoms/context-menu/context-menu-types.ts", "packages/core/src/components/atoms/context-menu/index.ts" ], "presets": ["packages/presets/src/firstEdition/context-menu.css"], "react": [ "packages/react/src/components/context-menu/__tests__/context-menu.test.tsx", "packages/react/src/components/context-menu/context-menu.tsx", "packages/react/src/components/context-menu/index.ts" ], "vue": [ "packages/vue/src/components/context-menu/__tests__/context-menu.test.ts", "packages/vue/src/components/context-menu/context-menu.ts", "packages/vue/src/components/context-menu/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/context-menu/ContextMenu.svelte", "packages/svelte/src/lib/components/context-menu/index.ts", "packages/svelte/src/lib/components/context-menu/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/context-menu/__tests__/context-menu-introduction-docs.test.ts", "apps/storybook-react/src/stories/context-menu/__tests__/context-menu-taxonomy.test.ts", "apps/storybook-react/src/stories/context-menu/context-menu.stories.tsx", "apps/storybook-react/src/stories/context-menu/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/context-menu/__tests__/context-menu-introduction-docs.test.ts", "apps/storybook-vue/src/stories/context-menu/__tests__/context-menu-taxonomy.test.ts", "apps/storybook-vue/src/stories/context-menu/context-menu.stories.ts", "apps/storybook-vue/src/stories/context-menu/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/context-menu/__tests__/context-menu-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/context-menu/__tests__/context-menu-taxonomy.test.ts", "apps/storybook-svelte/src/stories/context-menu/context-menu.stories.ts", "apps/storybook-svelte/src/stories/context-menu/Introduction.mdx" ], "contracts": [] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "context-menu", "canonicalAttributes": ["data-component", "data-destructive"], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "ContextMenu exposes a menu surface and button-backed menu items while popover/open-state orchestration stays adapter-owned." ] }, "design": { "componentJsons": [ ".figma/marwes/components/context-menu.json", ".figma/marwes/components/partscontext-menucontext-menu-item.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-context-menu/-context-menu_1574-24029.json", ".figma/marwes/pages/-context-menu/-context-menu-dark_1574-24160.json", ".figma/marwes/pages/-context-menu/component-container_2967-6148.json" ], "nodeReferences": { "contextMenuComponent": "1574:23952", "contextMenuItemComponent": "1574:23946", "contextMenuLightFrame": "1574:24029", "contextMenuDarkFrame": "1574:24160", "contextMenuContainer": "2967:6148" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["default", "grouped", "quick-actions"], "interactionStates": ["light", "dark", "disabled", "destructive", "divider"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "ContextMenu exposes a menu surface and button-backed menu items while popover/open-state orchestration stays adapter-owned.", "Generated from docs/registry/families/context-menu/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "date-picker", "readmePath": "docs/registry/families/date-picker/README.md", "metaPath": "docs/registry/families/date-picker/registry.meta.json", "generatedPath": "docs/registry/families/date-picker/registry.generated.json", "visualPaths": [ "docs/registry/families/date-picker/visuals/file-map.mmd", "docs/registry/families/date-picker/visuals/interaction-map.mmd", "docs/registry/families/date-picker/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "date-picker", "displayName": "Date Picker", "status": "shipped", "summary": "Calendar selection surface synced from the V2 Date Picker component, with device metadata, day-state contracts, and shared React/Vue adapters.", "philosophy": [ "Keep Date Picker as a visual and semantic calendar surface rather than a date-math engine.", "Keep day-state mapping in core so React and Vue render the same selected, range, disabled, and empty states.", "Keep popover behavior, form composition, parsing, and locale formatting outside the base component.", "Prefer native table semantics for the calendar grid while keeping each available date as a button." ], "usage": { "useWhen": [ "The UI needs a calendar panel for choosing a date or reviewing a date range.", "The product already owns date math, month navigation state, and selected date state.", "React and Vue consumers should receive the same day-state anatomy and data metadata." ], "avoidWhen": [ "The experience needs a complete form field/popover with parsing and validation baked in.", "The component must own locale-aware calendar math or complex range-selection behavior.", "The product needs time picking or multi-calendar comparison layouts." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for baseline metadata, default calendar rows, mobile device metadata, and accessible day labels.", "Preset CSS contract tests for calendar geometry and day-state classes.", "React and Vue adapter tests for table labels, selected/disabled states, and day selection events.", "Storybook introduction/taxonomy tests and a11y smoke coverage in both React and Vue Storybook apps." ], "manualReviewRequired": [ "Keyboard interaction model review when product-level month navigation and range selection are wired.", "Visual review against the synced V2 Date Picker page for spacing and state fidelity.", "Locale/date-format review before use in production forms." ], "roadmapAnchors": [], "notes": [ "The base component intentionally does not implement calendar math or popover state." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/date-picker/Introduction.mdx", "apps/storybook-react/src/stories/date-picker/date-picker.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/date-picker/Introduction.mdx", "apps/storybook-vue/src/stories/date-picker/date-picker.stories.ts" ] }, "preferredStates": ["desktop", "mobile", "selected", "range", "disabled", "null"] }, "openQuestions": [ "Should DatePickerField become a separate molecule that composes Input, popover state, and Date Picker?" ] }, "generated": { "family": "date-picker", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/date-picker/date-picker-a11y.ts", "packages/core/src/components/atoms/date-picker/date-picker-recipe.ts", "packages/core/src/components/atoms/date-picker/date-picker-types.ts", "packages/core/src/components/atoms/date-picker/index.ts" ], "presets": ["packages/presets/src/firstEdition/date-picker.css"], "react": [ "packages/react/src/components/date-picker/__tests__/date-picker.test.tsx", "packages/react/src/components/date-picker/__tests__/index-exports.test.tsx", "packages/react/src/components/date-picker/date-picker-field.tsx", "packages/react/src/components/date-picker/date-picker.tsx", "packages/react/src/components/date-picker/index.ts" ], "vue": [ "packages/vue/src/components/date-picker/__tests__/date-picker.test.ts", "packages/vue/src/components/date-picker/__tests__/index-exports.test.ts", "packages/vue/src/components/date-picker/date-picker-field.ts", "packages/vue/src/components/date-picker/date-picker.ts", "packages/vue/src/components/date-picker/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/date-picker/DatePicker.svelte", "packages/svelte/src/lib/components/date-picker/DatePickerField.svelte", "packages/svelte/src/lib/components/date-picker/index.ts", "packages/svelte/src/lib/components/date-picker/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/date-picker/__tests__/date-picker-field-taxonomy.test.ts", "apps/storybook-react/src/stories/date-picker/__tests__/date-picker-introduction-docs.test.ts.disabled", "apps/storybook-react/src/stories/date-picker/__tests__/date-picker-taxonomy.test.ts.disabled", "apps/storybook-react/src/stories/date-picker/date-picker-field.stories.tsx", "apps/storybook-react/src/stories/date-picker/date-picker.stories.tsx.disabled", "apps/storybook-react/src/stories/date-picker/Introduction.mdx.disabled" ], "storybookVue": [ "apps/storybook-vue/src/stories/date-picker/__tests__/date-picker-field-taxonomy.test.ts", "apps/storybook-vue/src/stories/date-picker/__tests__/date-picker-introduction-docs.test.ts.disabled", "apps/storybook-vue/src/stories/date-picker/__tests__/date-picker-taxonomy.test.ts.disabled", "apps/storybook-vue/src/stories/date-picker/date-picker-field.stories.ts", "apps/storybook-vue/src/stories/date-picker/date-picker.stories.ts.disabled", "apps/storybook-vue/src/stories/date-picker/Introduction.mdx.disabled" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/date-picker/__tests__/date-picker-field-taxonomy.test.ts", "apps/storybook-svelte/src/stories/date-picker/date-picker-field.stories.ts", "apps/storybook-svelte/src/stories/date-picker/date-picker.stories.ts.disabled", "apps/storybook-svelte/src/stories/date-picker/DatePickerDemo.svelte", "apps/storybook-svelte/src/stories/date-picker/DatePickerFieldPreview.svelte", "apps/storybook-svelte/src/stories/date-picker/Introduction.mdx.disabled" ], "contracts": ["tests/contracts/date-picker.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "date-picker", "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/date-picker/date-picker-recipe.ts" ], "notes": [ "Date Picker is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The component emits data-component=date-picker plus local device and day-state metadata from core." ] }, "design": { "componentJsons": [ ".figma/marwes/components/date-picker.json", ".figma/marwes/components/partsdate-picker-item.json", ".figma/marwes/components/date-picker-field.json", ".figma/marwes/components/icons-interface-calendar.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-v2-date-picker/README.md" ], "pageReferences": [ ".figma/marwes/pages/-v2-date-picker/date-picker_1918-16141.json", ".figma/marwes/pages/-v2-date-picker/-date-picker_1807-17542.json", ".figma/marwes/pages/-v2-date-picker/-date-picker-dark_1807-17615.json", ".figma/marwes/pages/-v2-date-picker/partsdate-picker-item_1807-16918.json" ], "nodeReferences": { "datePickerItemComponentSet": "1814:1221", "datePickerField": "1807:17191" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["desktop", "mobile"], "interactionStates": [ "default", "hover", "selected", "range", "range-hover", "disabled", "null" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Date Picker is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The component emits data-component=date-picker plus local device and day-state metadata from core.", "Generated from docs/registry/families/date-picker/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "dialog", "readmePath": "docs/registry/families/dialog/README.md", "metaPath": "docs/registry/families/dialog/registry.meta.json", "generatedPath": "docs/registry/families/dialog/registry.generated.json", "visualPaths": [ "docs/registry/families/dialog/visuals/file-map.mmd", "docs/registry/families/dialog/visuals/interaction-map.mmd", "docs/registry/families/dialog/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "dialog", "displayName": "Dialog", "status": "shipped", "summary": "High-risk modal family with a non-modal shell, canonical modal overlay layer, and stable purpose-dialog wrappers.", "philosophy": [ "Keep the raw Dialog shell separate from the canonical modal overlay layer.", "Let DialogModal own aria-modal, initial focus, focus trap, dismissal, and focus restoration.", "Keep purpose wrappers thin so semantic intent is additive rather than a second modal implementation.", "Document remaining hardening work such as background isolation explicitly instead of overclaiming completeness." ], "usage": { "useWhen": [ "A workflow needs a named dialog shell or a canonical modal overlay with consistent focus and dismissal behavior.", "The product flow maps clearly to confirm, destructive, or informational dialog intent.", "The team wants React and Vue modal behavior to stay aligned through shared contracts." ], "avoidWhen": [ "A lower-weight surface such as a tooltip or other non-modal help pattern is the more honest interaction model.", "Parent code cannot own a raw-shell modal boundary intentionally when using the Dialog modal escape hatch.", "The team needs background-isolation guarantees that go beyond the currently shipped modal hardening level." ] }, "axe": { "riskTier": "high", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared dialog and dialog-modal contracts across React and Vue.", "Storybook introduction and taxonomy tests in both apps.", "Documented shell-vs-modal boundary and deterministic initial-focus policy." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for modal flows.", "Future background-isolation hardening such as inert or equivalent sibling management.", "Advanced parent-managed modal-shell compositions that use the Dialog modal escape hatch intentionally." ], "roadmapAnchors": [ "AXE_ROADMAP.md#dialog-family", "AXE_ROADMAP.md#4a--dialog-modal-hardening" ], "notes": [ "Dialog completed a first-pass family audit and now has an explicit shell-vs-modal contract.", "Background isolation remains future hardening work rather than a completed guarantee." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/dialog/Introduction.mdx", "apps/storybook-react/src/stories/dialog/dialog-modal.stories.tsx", "apps/storybook-react/src/stories/dialog/destructive-dialog.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/dialog/Introduction.mdx", "apps/storybook-vue/src/stories/dialog/dialog-modal.stories.ts", "apps/storybook-vue/src/stories/dialog/destructive-dialog.stories.ts" ] }, "preferredStates": [ "open", "dismissible", "locked-dismissal", "focus-trap", "no-focusable-fallback" ] }, "openQuestions": [ "Should dialog-family stories eventually join stricter automated accessibility gates once the broader AXE verification command lands?", "When background isolation is hardened further, should the registry split current behavior vs future target behavior more explicitly?" ] }, "generated": { "family": "dialog", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/dialog-family-accessibility.md"], "roadmap": ["AXE_ROADMAP.md#dialog-family", "AXE_ROADMAP.md#4a--dialog-modal-hardening"], "core": [ "packages/core/src/components/atoms/dialog/dialog-a11y.ts", "packages/core/src/components/atoms/dialog/dialog-recipe.ts", "packages/core/src/components/atoms/dialog/dialog-types.ts", "packages/core/src/components/atoms/dialog/index.ts" ], "presets": [ "packages/presets/src/firstEdition/dialog.css", "packages/presets/src/firstEdition/molecules/dialog-modal.css" ], "react": [ "packages/react/src/components/dialog/__tests__/dialog-modal.test.tsx", "packages/react/src/components/dialog/__tests__/dialog.test.tsx", "packages/react/src/components/dialog/__tests__/variants.test.tsx", "packages/react/src/components/dialog/dialog-modal.tsx", "packages/react/src/components/dialog/dialog.tsx", "packages/react/src/components/dialog/index.ts", "packages/react/src/components/dialog/variants.tsx" ], "vue": [ "packages/vue/src/components/dialog/__tests__/dialog-modal.test.ts", "packages/vue/src/components/dialog/__tests__/dialog.test.ts", "packages/vue/src/components/dialog/__tests__/variants.test.ts", "packages/vue/src/components/dialog/dialog-modal.ts", "packages/vue/src/components/dialog/dialog.ts", "packages/vue/src/components/dialog/index.ts", "packages/vue/src/components/dialog/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/dialog/ConfirmDialog.svelte", "packages/svelte/src/lib/components/dialog/DestructiveDialog.svelte", "packages/svelte/src/lib/components/dialog/Dialog.svelte", "packages/svelte/src/lib/components/dialog/DialogModal.svelte", "packages/svelte/src/lib/components/dialog/index.ts", "packages/svelte/src/lib/components/dialog/InfoDialog.svelte", "packages/svelte/src/lib/components/dialog/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/dialog/__tests__/dialog-introduction-docs.test.ts", "apps/storybook-react/src/stories/dialog/__tests__/dialog-taxonomy.test.ts", "apps/storybook-react/src/stories/dialog/confirm-dialog.stories.tsx", "apps/storybook-react/src/stories/dialog/destructive-dialog.stories.tsx", "apps/storybook-react/src/stories/dialog/dialog-modal.stories.tsx", "apps/storybook-react/src/stories/dialog/dialog.stories.tsx", "apps/storybook-react/src/stories/dialog/info-dialog.stories.tsx", "apps/storybook-react/src/stories/dialog/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/dialog/__tests__/dialog-introduction-docs.test.ts", "apps/storybook-vue/src/stories/dialog/__tests__/dialog-taxonomy.test.ts", "apps/storybook-vue/src/stories/dialog/confirm-dialog.stories.ts", "apps/storybook-vue/src/stories/dialog/destructive-dialog.stories.ts", "apps/storybook-vue/src/stories/dialog/dialog-modal.stories.ts", "apps/storybook-vue/src/stories/dialog/dialog.stories.ts", "apps/storybook-vue/src/stories/dialog/info-dialog.stories.ts", "apps/storybook-vue/src/stories/dialog/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/dialog/__tests__/dialog-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/dialog/__tests__/dialog-taxonomy.test.ts", "apps/storybook-svelte/src/stories/dialog/confirm-dialog.stories.ts", "apps/storybook-svelte/src/stories/dialog/ConfirmDialogStory.svelte", "apps/storybook-svelte/src/stories/dialog/destructive-dialog.stories.ts", "apps/storybook-svelte/src/stories/dialog/DestructiveDialogStory.svelte", "apps/storybook-svelte/src/stories/dialog/dialog-modal.stories.ts", "apps/storybook-svelte/src/stories/dialog/dialog.stories.ts", "apps/storybook-svelte/src/stories/dialog/DialogAtomStory.svelte", "apps/storybook-svelte/src/stories/dialog/DialogStory.svelte", "apps/storybook-svelte/src/stories/dialog/info-dialog.stories.ts", "apps/storybook-svelte/src/stories/dialog/InfoDialogStory.svelte", "apps/storybook-svelte/src/stories/dialog/Introduction.mdx" ], "contracts": [ "tests/contracts/dialog.contract.ts", "tests/contracts/dialog-modal.contract.ts" ] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "dialog", "canonicalAttributes": ["data-component", "data-size", "data-intent"], "allowedPurposes": ["confirm-dialog", "destructive-dialog", "info-dialog"], "purposeAttributes": { "confirm-dialog": { "data-purpose": "confirm-dialog", "data-intent": "confirm" }, "destructive-dialog": { "data-purpose": "destructive-dialog", "data-intent": "destructive", "data-destructive": "true", "data-confirmation-required": "true" }, "info-dialog": { "data-purpose": "info-dialog", "data-intent": "info" } }, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "Dialog already has a strong purpose mapping and workflow semantics in adapters." ] }, "design": { "componentJsons": [ ".figma/marwes/components/dialog.json", ".figma/marwes/components/scrim.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-dialog/README.md" ], "pageReferences": [ ".figma/marwes/pages/-dialog/-dialog_1609-15527.json", ".figma/marwes/pages/-dialog/-dialog-dark_3017-37102.json", ".figma/marwes/pages/-dialog/icons-interface-x_1595-13879.json" ], "nodeReferences": { "dialogComponent": "1609:15459", "dialogLightFrame": "1609:15527", "dialogDarkFrame": "3017:37102", "closeIcon": "1595:13879" }, "figmaTokens": ["text/primary", "text/secondary"], "figmaStates": { "baseVariants": [ "dialog-shell", "dialog-modal", "confirm-dialog", "destructive-dialog", "info-dialog" ], "interactionStates": [ "open", "dismissible", "locked-dismissal", "focus-trap", "no-focusable-fallback" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Dialog already has a strong purpose mapping and workflow semantics in adapters.", "Generated from docs/registry/families/dialog/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "divider", "readmePath": "docs/registry/families/divider/README.md", "metaPath": "docs/registry/families/divider/registry.meta.json", "generatedPath": "docs/registry/families/divider/registry.generated.json", "visualPaths": [ "docs/registry/families/divider/visuals/file-map.mmd", "docs/registry/families/divider/visuals/interaction-map.mmd", "docs/registry/families/divider/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "divider", "displayName": "Divider", "status": "shipped", "summary": "Family-local baseline separator family with a single Divider atom for horizontal and vertical content separation.", "philosophy": [ "Keep Divider as a single-purpose atom and avoid turning it into a family of decorated or text-embedded separators by default.", "Keep the semantic
baseline and source-owned size mapping in core so React, Vue, and Svelte stay aligned.", "Treat the current Figma page as a horizontal spacing reference, while the shipped vertical orientation remains a deliberate code-level extension.", "Keep local divider metadata honest: the atom emits stable data-component, data-size, and data-orientation values from core, but Divider is not part of the wave-1 central semantic registry." ], "usage": { "useWhen": [ "The UI needs a semantic separator between related sections or inline groups of content.", "The product wants one small separator primitive with a clear size scale and horizontal or vertical orientation.", "The team wants React, Vue, and Svelte divider behavior to stay aligned through one shared contract and one core recipe." ], "avoidWhen": [ "The layout only needs whitespace and does not benefit from an actual semantic separator.", "The design really calls for a richer pattern such as an \"or\" divider, labeled separator, or section heading rather than a plain rule.", "The product expects Figma-backed vertical-divider variants even though the current synced design page only teaches the horizontal baseline." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for the horizontal default, size mapping, orientation metadata, and optional id handling.", "Shared divider contract coverage across React and Vue for semantic separator behavior.", "Storybook introduction and taxonomy tests in both apps for the atom guidance and story placement." ], "manualReviewRequired": [ "Product-level judgment about when a divider adds meaningful section separation versus when spacing or headings would be the more honest structure.", "Real layout review for vertical dividers because container height and surrounding alignment still matter visually.", "Any future move toward text-embedded or richer divider patterns that would expand beyond the current single-atom scope." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Divider completed a first-pass accessibility audit focused on semantic-separator honesty, spacing-vs-structure guidance, and vertical-layout caveats.", "The family now has expanded shared-contract coverage for local metadata plus explicit accessibility notes in both Storybook apps." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/divider/Introduction.mdx", "apps/storybook-react/src/stories/divider/divider.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/divider/Introduction.mdx", "apps/storybook-vue/src/stories/divider/divider.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/divider/Introduction.mdx", "apps/storybook-svelte/src/stories/divider/divider.stories.ts" ] }, "preferredStates": [ "xxs", "xs", "sm", "md", "lg", "xl", "xxl", "horizontal", "vertical", "light", "dark" ] }, "openQuestions": [ "If labeled or \"or\" dividers eventually ship, should they become a separate family or remain an extension of the current Divider atom?", "Should the curated Figma node references for Divider be refreshed so NODE_REFERENCE.md and nodes.json point at the newer 1574:* divider page instead of the older 1364:* section?" ] }, "generated": { "family": "divider", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/divider-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/divider/divider-recipe.ts", "packages/core/src/components/atoms/divider/divider-types.ts", "packages/core/src/components/atoms/divider/index.ts" ], "presets": ["packages/presets/src/firstEdition/divider.css"], "react": [ "packages/react/src/components/divider/__tests__/divider.test.tsx", "packages/react/src/components/divider/divider.tsx", "packages/react/src/components/divider/index.ts" ], "vue": [ "packages/vue/src/components/divider/__tests__/divider.test.ts", "packages/vue/src/components/divider/divider.ts", "packages/vue/src/components/divider/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/divider/Divider.svelte", "packages/svelte/src/lib/components/divider/index.ts", "packages/svelte/src/lib/components/divider/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/divider/__tests__/divider-introduction-docs.test.ts", "apps/storybook-react/src/stories/divider/__tests__/divider-taxonomy.test.ts", "apps/storybook-react/src/stories/divider/divider.stories.tsx", "apps/storybook-react/src/stories/divider/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/divider/__tests__/divider-introduction-docs.test.ts", "apps/storybook-vue/src/stories/divider/__tests__/divider-taxonomy.test.ts", "apps/storybook-vue/src/stories/divider/divider.stories.ts", "apps/storybook-vue/src/stories/divider/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/divider/__tests__/divider-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/divider/divider.stories.ts", "apps/storybook-svelte/src/stories/divider/DividerPreview.svelte", "apps/storybook-svelte/src/stories/divider/DividerShowcase.svelte", "apps/storybook-svelte/src/stories/divider/Introduction.mdx" ], "contracts": ["tests/contracts/divider.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "divider", "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": ["packages/core/src/components/atoms/divider/divider-recipe.ts"], "notes": [ "Divider is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=divider plus local size and orientation metadata directly from core." ] }, "design": { "componentJsons": [".figma/marwes/components/divider.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-divider/README.md" ], "pageReferences": [ ".figma/marwes/pages/-divider/component-container_1574-24629.json", ".figma/marwes/pages/-divider/-divider_1574-24658.json", ".figma/marwes/pages/-divider/-divider-dark_1574-24738.json" ], "nodeReferences": { "dividerComponent": "1574:21053", "dividerComponentContainer": "1574:24629", "dividerLightFrame": "1574:24658", "dividerDarkFrame": "1574:24738" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["horizontal-divider"], "interactionStates": [ "sp-80", "sp-64", "sp-48", "sp-32", "sp-16", "sp-12", "sp-8", "sp-1", "light", "dark", "vertical" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Divider is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=divider plus local size and orientation metadata directly from core.", "Generated from docs/registry/families/divider/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "drawer", "readmePath": "docs/registry/families/drawer/README.md", "metaPath": "docs/registry/families/drawer/registry.meta.json", "generatedPath": "docs/registry/families/drawer/registry.generated.json", "visualPaths": [ "docs/registry/families/drawer/visuals/file-map.mmd", "docs/registry/families/drawer/visuals/interaction-map.mmd", "docs/registry/families/drawer/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "drawer", "displayName": "Drawer", "status": "shipped", "summary": "Dialog-adjacent panel atom with left/right placement, size variants, optional scrim, optional footer, and shared dialog semantics across adapters.", "philosophy": [ "Keep Drawer as a panel composition primitive while open state and lifecycle stay product-owned.", "Keep dialog semantics in core so panel labeling, modal state, and data-component identity stay aligned across adapters.", "Document focus management as a product/composition boundary until Marwes ships a managed DrawerShell." ], "usage": { "useWhen": [ "The UI needs a side panel for contextual details, navigation, filters, or secondary workflows.", "The panel can provide a truthful aria-label or aria-labelledby reference.", "The product owns open state, close behavior, and focus return around the drawer." ], "avoidWhen": [ "The interaction is a blocking confirmation; use Dialog instead.", "The product cannot provide focus management for modal drawer usage.", "The content is short inline help; use Tooltip or a simpler disclosure instead." ] }, "axe": { "riskTier": "high", "auditStatus": "queued", "automationCovers": [ "Core and adapter tests for panel role, modal metadata, scrim rendering, dismissible behavior, size, and placement classes.", "Storybook introduction and taxonomy tests in React, Vue, and Svelte apps." ], "manualReviewRequired": [ "Keyboard focus trap, Escape handling, and focus return in real product compositions.", "Screen-reader announcement of drawer title/description in modal and non-modal contexts.", "Visual review against the synced light and dark Figma drawer frames." ], "roadmapAnchors": [], "notes": [ "Drawer is covered by the canonical family semantic registry with data-component=drawer.", "The current atom does not claim to own the full modal lifecycle." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/drawer/Introduction.mdx", "apps/storybook-react/src/stories/drawer/drawer.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/drawer/Introduction.mdx", "apps/storybook-vue/src/stories/drawer/drawer.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/drawer/Introduction.mdx", "apps/storybook-svelte/src/stories/drawer/drawer.stories.ts" ] }, "preferredStates": [ "default", "minimal", "left", "right", "small", "medium", "large", "scrim", "footer", "dismissible" ] }, "openQuestions": [ "Should Marwes add a managed DrawerShell that owns focus trap, Escape handling, and focus return?", "Should Drawer expose purpose variants for filters, details, navigation, and checkout flows?" ] }, "generated": { "family": "drawer", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/drawer/drawer-a11y.ts", "packages/core/src/components/atoms/drawer/drawer-recipe.ts", "packages/core/src/components/atoms/drawer/drawer-types.ts", "packages/core/src/components/atoms/drawer/index.ts" ], "presets": ["packages/presets/src/firstEdition/drawer.css"], "react": [ "packages/react/src/components/drawer/__tests__/drawer.test.tsx", "packages/react/src/components/drawer/drawer.tsx", "packages/react/src/components/drawer/index.ts" ], "vue": [ "packages/vue/src/components/drawer/__tests__/drawer.test.ts", "packages/vue/src/components/drawer/drawer.ts", "packages/vue/src/components/drawer/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/drawer/Drawer.svelte", "packages/svelte/src/lib/components/drawer/index.ts", "packages/svelte/src/lib/components/drawer/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/drawer/__tests__/drawer-introduction-docs.test.ts", "apps/storybook-react/src/stories/drawer/__tests__/drawer-taxonomy.test.ts", "apps/storybook-react/src/stories/drawer/drawer.stories.tsx", "apps/storybook-react/src/stories/drawer/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/drawer/__tests__/drawer-introduction-docs.test.ts", "apps/storybook-vue/src/stories/drawer/__tests__/drawer-taxonomy.test.ts", "apps/storybook-vue/src/stories/drawer/drawer.stories.ts", "apps/storybook-vue/src/stories/drawer/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/drawer/__tests__/drawer-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/drawer/__tests__/drawer-taxonomy.test.ts", "apps/storybook-svelte/src/stories/drawer/drawer.stories.ts", "apps/storybook-svelte/src/stories/drawer/DrawerAtomStory.svelte", "apps/storybook-svelte/src/stories/drawer/Introduction.mdx" ], "contracts": [] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "drawer", "canonicalAttributes": ["data-component", "data-size"], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "Drawer shares dialog semantics while adding panel placement and scrim composition at the family level." ] }, "design": { "componentJsons": [".figma/marwes/components/drawer.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-drawer/README.md" ], "pageReferences": [ ".figma/marwes/pages/-drawer/-drawer_1609-15651.json", ".figma/marwes/pages/-drawer/-drawer-dark_3017-37492.json", ".figma/marwes/pages/-drawer/component-container_2967-7341.json" ], "nodeReferences": { "drawerComponentSet": "3017:37258", "drawerLightFrame": "1609:15651", "drawerDarkFrame": "3017:37492", "drawerContainer": "2967:7341" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["default", "minimal", "small", "medium", "large", "left", "right"], "interactionStates": ["open", "closed", "modal", "scrim", "footer", "dismissible"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Drawer shares dialog semantics while adding panel placement and scrim composition at the family level.", "Generated from docs/registry/families/drawer/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "heading", "readmePath": "docs/registry/families/heading/README.md", "metaPath": "docs/registry/families/heading/registry.meta.json", "generatedPath": "docs/registry/families/heading/registry.generated.json", "visualPaths": [ "docs/registry/families/heading/visuals/file-map.mmd", "docs/registry/families/heading/visuals/interaction-map.mmd", "docs/registry/families/heading/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "heading", "displayName": "Heading", "status": "shipped", "summary": "Native-semantic typography family with three raw heading atoms backed by one core recipe, one shared typography preset, and a shared React/Vue contract.", "philosophy": [ "Choose semantic level by document structure first and keep H1, H2, and H3 grounded in real native heading elements.", "Keep native semantics as the contract instead of adding Marwes metadata where plain h1/h2/h3 already express the meaning honestly.", "Treat size as a deliberate visual escape hatch, not as a shortcut for skipping outline decisions.", "Keep heading styling source-owned in theme typography and shared typography.css so Heading and Paragraph stay aligned." ], "usage": { "useWhen": [ "The UI needs a real page, section, or subsection heading and document outline should stay explicit.", "The product wants React and Vue heading behavior to stay aligned through one core recipe and one shared contract.", "Semantic level and visual size may need to diverge intentionally while still keeping the native heading tag." ], "avoidWhen": [ "The layout only needs visually larger text and does not benefit from real heading semantics.", "The surface is really a richer hero, banner, or section-header composition rather than a plain heading atom.", "The team expects a family-local metadata layer or purpose-wrapper vocabulary that the current heading family does not ship." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for semantic tag selection, default size mapping, and explicit size override behavior.", "Shared heading contract coverage across React and Vue for native heading semantics, id, and aria-label passthrough.", "Storybook introduction and taxonomy tests in both apps for the atom teaching surface." ], "manualReviewRequired": [ "Product-level judgment about choosing the correct heading level for the real document outline.", "Whether size overrides are used sparingly and do not flatten the content hierarchy.", "Whether heading ids and anchor-link patterns stay useful and consistent in real documentation or product flows." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Heading completed a first-pass accessibility audit focused on outline-first usage, size override honesty, and native-semantic documentation.", "The family now has expanded shared-contract coverage for H1 and the absence of family-local metadata plus explicit accessibility notes in both Storybook apps." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/heading/Introduction.mdx", "apps/storybook-react/src/stories/heading/heading.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/heading/Introduction.mdx", "apps/storybook-vue/src/stories/heading/heading.stories.ts" ] }, "preferredStates": [ "h1", "h2", "h3", "all-levels", "size-override", "with-id", "long-text", "content-hierarchy", "light", "dark" ] }, "openQuestions": [ "If Marwes later needs H4+, should that extend the current Heading family or arrive as part of a broader typography contract update?", "Should the local Figma sync eventually gain a dedicated heading component/page that maps directly to the shipped H1 / H2 / H3 API, or is the typography-page baseline sufficient?" ] }, "generated": { "family": "heading", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/heading-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/heading/heading-a11y.ts", "packages/core/src/components/atoms/heading/heading-recipe.ts", "packages/core/src/components/atoms/heading/heading-types.ts", "packages/core/src/components/atoms/heading/index.ts" ], "presets": ["packages/presets/src/firstEdition/typography.css"], "react": [ "packages/react/src/components/heading/__tests__/heading.test.tsx", "packages/react/src/components/heading/h1.tsx", "packages/react/src/components/heading/h2.tsx", "packages/react/src/components/heading/h3.tsx", "packages/react/src/components/heading/index.ts" ], "vue": [ "packages/vue/src/components/heading/__tests__/heading.test.ts", "packages/vue/src/components/heading/create-heading.ts", "packages/vue/src/components/heading/heading-variants.ts", "packages/vue/src/components/heading/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/heading/H1.svelte", "packages/svelte/src/lib/components/heading/H2.svelte", "packages/svelte/src/lib/components/heading/H3.svelte", "packages/svelte/src/lib/components/heading/index.ts", "packages/svelte/src/lib/components/heading/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/heading/__tests__/heading-introduction-docs.test.ts", "apps/storybook-react/src/stories/heading/__tests__/heading-taxonomy.test.ts", "apps/storybook-react/src/stories/heading/heading.stories.tsx", "apps/storybook-react/src/stories/heading/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/heading/__tests__/heading-introduction-docs.test.ts", "apps/storybook-vue/src/stories/heading/__tests__/heading-taxonomy.test.ts", "apps/storybook-vue/src/stories/heading/heading.stories.ts", "apps/storybook-vue/src/stories/heading/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/heading/__tests__/heading-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/heading/heading.stories.ts", "apps/storybook-svelte/src/stories/heading/HeadingShowcase.svelte", "apps/storybook-svelte/src/stories/heading/Introduction.mdx" ], "contracts": ["tests/contracts/heading.contract.ts"] }, "semantics": { "coverageLevel": "none", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/heading/heading-recipe.ts", "packages/react/src/components/heading/h1.tsx", "packages/react/src/components/heading/h2.tsx", "packages/react/src/components/heading/h3.tsx", "packages/vue/src/components/heading/create-heading.ts", "tests/contracts/heading.contract.ts" ], "notes": [ "Heading relies on native h1/h2/h3 semantics rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; semantic meaning comes from the rendered heading tag and the surrounding document outline." ] }, "design": { "componentJsons": [], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/README.md", ".figma/marwes/tokens/typography.json", ".figma/marwes/pages/-typography/README.md", ".figma/marwes/components/component-heading.json", ".figma/marwes/pages/-banner/component-heading_1932-7061.json", ".figma/marwes/pages/additional-to-this-file/component-heading_1918-15800.json", ".figma/marwes/pages/additional-to-this-file/component-heading_1918-15833.json" ], "pageReferences": [ ".figma/marwes/pages/-typography/typography_1368-5656.json", ".figma/marwes/pages/-typography/typography_1368-5677.json", ".figma/marwes/pages/-typography/typography_1368-5698.json", ".figma/marwes/pages/-typography/typography_1368-5717.json" ], "nodeReferences": { "typographyLightSection": "1368:5656", "typographyDarkSection": "1368:5677", "headingH1LightRow": "1368:5665", "headingH2LightRow": "1368:5666", "headingH3LightRow": "1368:5667", "headingH1DarkRow": "1368:5686", "headingH2DarkRow": "1368:5687", "headingH3DarkRow": "1368:5688", "instrumentSansLightSection": "1368:5698", "instrumentSansDarkSection": "1368:5717", "componentHeadingComponent": "1918:15754" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["h1", "h2", "h3"], "interactionStates": ["light", "dark", "typography-scale", "documentation-scaffold"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Heading relies on native h1/h2/h3 semantics rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; semantic meaning comes from the rendered heading tag and the surrounding document outline.", "Generated from docs/registry/families/heading/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "icon", "readmePath": "docs/registry/families/icon/README.md", "metaPath": "docs/registry/families/icon/registry.meta.json", "generatedPath": "docs/registry/families/icon/registry.generated.json", "visualPaths": [ "docs/registry/families/icon/visuals/file-map.mmd", "docs/registry/families/icon/visuals/interaction-map.mmd", "docs/registry/families/icon/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "icon", "displayName": "Icon", "status": "shipped", "summary": "Named SVG icon family with one raw Icon atom, a generated runtime inventory, gallery-driven Storybook discovery, and shared React/Vue contract coverage for decorative versus labelled behavior.", "philosophy": [ "Teach Icon as a low-level visual adjunct and keep the semantic meaning on the surrounding control, label, or nearby text whenever possible.", "Default unlabeled icons to decorative so assistive technology is not burdened with meaningless duplicate announcements.", "Treat the Storybook gallery as the main discovery surface for choosing names, sizes, and stroke weights across the shipped runtime inventory.", "Keep the icon inventory source-owned in the generated core registry, while being honest that the current adapter path does not fully use the adjacent core recipe and preset CSS layers." ], "usage": { "useWhen": [ "The UI needs a named decorative or labelled icon alongside text, controls, or status copy.", "The product wants React and Vue icon behavior to stay aligned through the shared icon registry, size scale, stroke-width scale, and contract coverage.", "Teams need a searchable gallery for the shipped icon inventory before placing icons into larger families like buttons, tabs, inputs, or tooltips." ], "avoidWhen": [ "The icon would be carrying the only accessible meaning of an interaction without a parent control label or its own explicit aria-label.", "A richer component such as Button, IconButton, TooltipGroup, Avatar, or Toast is the more honest family surface for the job.", "The team expects a family-local metadata layer or purpose-wrapper vocabulary that the current Icon family does not ship." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for decorative defaults, size resolution, stroke-width resolution, and labelled icon output.", "Shared icon contract coverage across React and Vue for decorative-versus-labelled semantics and token-based size and stroke-width behavior.", "Storybook introduction and taxonomy tests in both apps for the atom teaching surface and icon-gallery discovery path." ], "manualReviewRequired": [ "Product-level review that icon-only buttons, tabs, tooltip triggers, and other parent controls always get an accessible name from the parent surface or an explicit label.", "Visual review that the current runtime stroke-based icon rendering still feels aligned with the locally synced Figma inventory and category galleries.", "Architectural review of whether the adapters should eventually converge on createIconRecipe and icon.css, or whether the unused recipe-layer affordances should be trimmed." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#dev-time-warnings" ], "notes": [ "Icon completed a first-pass accessibility audit focused on decorative defaults, icon-only parent control guidance, and dev-time warnings for non-decorative misuse.", "The family now has a shared icon a11y helper, expanded contract coverage, and explicit Storybook guidance for decorative-versus-labelled behavior." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/icon/Introduction.mdx", "apps/storybook-react/src/stories/icon/icon.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/icon/Introduction.mdx", "apps/storybook-vue/src/stories/icon/icon.stories.ts" ] }, "preferredStates": [ "decorative", "labelled", "xs", "sm", "md", "lg", "thin-stroke", "heavy-stroke", "light", "dark", "gallery-filtering" ] }, "openQuestions": [ "Should the React and Vue Icon adapters converge on createIconRecipe and icon.css, or should the unused recipe and preset affordances be trimmed so the family has one obvious runtime path?", "Should the local Figma sync gain a fuller icon inventory or clearer category mapping that matches the 227 shipped code icon names, or should the runtime inventory be narrowed closer to the current design baseline?" ] }, "generated": { "family": "icon", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/icon-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#dev-time-warnings" ], "core": [ "packages/core/src/components/atoms/icon/icon-a11y.ts", "packages/core/src/components/atoms/icon/icon-names.ts", "packages/core/src/components/atoms/icon/icon-preset.ts", "packages/core/src/components/atoms/icon/icon-recipe.ts", "packages/core/src/components/atoms/icon/icon-registry.ts", "packages/core/src/components/atoms/icon/icon-scales.ts", "packages/core/src/components/atoms/icon/icon-types.ts", "packages/core/src/components/atoms/icon/index.ts" ], "presets": ["packages/presets/src/firstEdition/icon.css"], "react": [ "packages/react/src/components/icon/__tests__/icon.test.tsx", "packages/react/src/components/icon/icon.tsx", "packages/react/src/components/icon/index.ts" ], "vue": [ "packages/vue/src/components/icon/__tests__/icon.test.ts", "packages/vue/src/components/icon/icon.ts", "packages/vue/src/components/icon/index.ts" ], "svelte": [ "packages/svelte/src/lib/components/icon/Icon.svelte", "packages/svelte/src/lib/components/icon/index.ts", "packages/svelte/src/lib/components/icon/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/icon/__tests__/icon-introduction-docs.test.ts", "apps/storybook-react/src/stories/icon/__tests__/icon-taxonomy.test.ts", "apps/storybook-react/src/stories/icon/icon.stories.tsx", "apps/storybook-react/src/stories/icon/Introduction.mdx" ], "storybookVue": [ "apps/storybook-vue/src/stories/icon/__tests__/icon-introduction-docs.test.ts", "apps/storybook-vue/src/stories/icon/__tests__/icon-taxonomy.test.ts", "apps/storybook-vue/src/stories/icon/icon.stories.ts", "apps/storybook-vue/src/stories/icon/Introduction.mdx" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/icon/__tests__/icon-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/icon/icon.stories.ts", "apps/storybook-svelte/src/stories/icon/IconGallery.svelte", "apps/storybook-svelte/src/stories/icon/Introduction.mdx" ], "contracts": ["tests/contracts/icon.contract.ts"] }, "semantics": { "coverageLevel": "none", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/icon/icon-registry.ts", "packages/core/src/components/atoms/icon/icon-scales.ts", "packages/core/src/components/atoms/icon/icon-recipe.ts", "packages/react/src/components/icon/icon.tsx", "packages/vue/src/components/icon/icon.ts", "tests/contracts/icon.contract.ts" ], "notes": [ "Icon relies on native SVG semantics and surrounding control context rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; the shipped adapters render SVGs directly from iconRegistry and shared size helpers, while createIconRecipe and icon.css remain adjacent but are not the current adapter path." ] }, "design": { "componentJsons": [ ".figma/marwes/components/icons-interface-search.json", ".figma/marwes/components/icons-interface-help-circle.json", ".figma/marwes/components/icons-interface-x.json", ".figma/marwes/components/icons-arrows-arrow-right.json", ".figma/marwes/components/icons-arrows-chevron-down.json", ".figma/marwes/components/icons-users-user.json", ".figma/marwes/components/bold-1.json", ".figma/marwes/components/play-1.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-icons/README.md" ], "pageReferences": [ ".figma/marwes/pages/-icons/-icons_1384-10135.json", ".figma/marwes/pages/-icons/-icons-dark_1384-10579.json", ".figma/marwes/pages/-icons/component-container_1384-11023.json", ".figma/marwes/pages/-icons/component-container_1384-11076.json", ".figma/marwes/pages/-icons/component-container_1384-11137.json", ".figma/marwes/pages/-icons/component-container_2015-6777.json", ".figma/marwes/pages/-icons/component-container_2015-7449.json", ".figma/marwes/pages/-icons/default-24px-xs-sm-md-lg_1455-8865.json" ], "nodeReferences": { "iconLightFrame": "1384:10135", "iconDarkFrame": "1384:10579", "interfaceComponentContainer": "1384:11023", "arrowsComponentContainer": "1384:11076", "usersComponentContainer": "1384:11137", "editorComponentContainer": "2015:6777", "mediasComponentContainer": "2015:7449", "sizeLegendText": "1455:8865", "searchIconComponent": "1382:9204", "chevronDownIconComponent": "1382:9262", "userIconComponent": "1382:9330", "boldIconComponent": "2015:7037", "playIconComponent": "2015:7436" }, "figmaTokens": ["icon/default"], "figmaStates": { "baseVariants": [ "interface-icons", "arrows-icons", "users-icons", "editor-icons", "medias-icons" ], "interactionStates": ["xs", "sm", "md", "lg", "light", "dark", "gallery"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Icon relies on native SVG semantics and surrounding control context rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; the shipped adapters render SVGs directly from iconRegistry and shared size helpers, while createIconRecipe and icon.css remain adjacent but are not the current adapter path.", "Generated from docs/registry/families/icon/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "input", "readmePath": "docs/registry/families/input/README.md", "metaPath": "docs/registry/families/input/registry.meta.json", "generatedPath": "docs/registry/families/input/registry.generated.json", "visualPaths": [ "docs/registry/families/input/visuals/file-map.mmd", "docs/registry/families/input/visuals/interaction-map.mmd", "docs/registry/families/input/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "input", "displayName": "Input", "status": "shipped", "summary": "Broad text-entry family spanning native text controls, Marwes-default select fields, OTP entry, and manual-review-heavy rich text.", "philosophy": [ "Keep plain text entry, multiline entry, select, OTP, and rich text in one input-domain family so shared field wiring stays coherent.", "Preserve native browser semantics for base Input, Textarea, and the Select atom while allowing Marwes chrome to be the default visual mode.", "Keep native browser select chrome explicit through native=true or appearance=native instead of treating it as the default visual path.", "Document rich text honestly as manual-review-heavy rather than pretending automated checks fully prove the editing experience." ], "usage": { "useWhen": [ "The UI needs text-like data entry with shared label, helper, error, and validation patterns.", "The product flow should benefit from purpose-level field wrappers such as SearchField, PasswordField, or DropdownField.", "The implementation should stay aligned across React, Vue, and Svelte through shared field helpers and contracts." ], "avoidWhen": [ "A different family such as checkbox, radio, or switch is the more honest control type.", "A custom dropdown visual is being chosen without testing the Marwes-default interaction path and native fallback behavior.", "The team is not prepared to manually review rich-text editing behavior in real browser and assistive-technology combinations." ] }, "axe": { "riskTier": "high", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared contracts for input, input fields, select, select combobox, textarea, dropdown, OTP, and rich text.", "Storybook introduction and taxonomy tests in both apps.", "Documented Marwes-default select guidance, native fallback behavior, and explicit rich-text manual-review boundary." ], "manualReviewRequired": [ "RichText editing behavior in supported browser and assistive-technology combinations.", "Edge-case custom dropdown interaction if the explicit custom path remains shipped.", "Future design alignment when a dedicated RichText Figma node becomes available." ], "roadmapAnchors": [ "AXE_ROADMAP.md#p1--first-component-audit-queue", "AXE_ROADMAP.md#4c--rich-text-risk-handling", "AXE_ROADMAP.md#4b--custom-select-hardening" ], "notes": [ "Input was the first detailed family audit because it concentrates both native-control and custom-widget accessibility risk.", "The family already completed a first pass and now acts as a reference for how family-level AXE work should be recorded." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/input/Introduction.mdx", "apps/storybook-react/src/stories/input/input.stories.tsx", "apps/storybook-react/src/stories/input/select-field.stories.tsx", "apps/storybook-react/src/stories/input/dropdown-field.stories.tsx", "apps/storybook-react/src/stories/input/input-otp.stories.tsx", "apps/storybook-react/src/stories/input/rich-text.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/input/Introduction.mdx", "apps/storybook-vue/src/stories/input/input.stories.ts", "apps/storybook-vue/src/stories/input/select-field.stories.ts", "apps/storybook-vue/src/stories/input/dropdown-field.stories.ts", "apps/storybook-vue/src/stories/input/input-otp.stories.ts", "apps/storybook-vue/src/stories/input/rich-text.stories.ts" ] }, "preferredStates": ["default", "hover", "active", "disabled", "focus", "error"] }, "openQuestions": [ "Should the input-family purpose metadata eventually move into the central semantic registry in @marwes-ui/core?", "When a dedicated RichText Figma component exists, should the registry split rich-text provenance out more explicitly inside the family page?" ] }, "generated": { "family": "input", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/input-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#p1--first-component-audit-queue", "AXE_ROADMAP.md#4c--rich-text-risk-handling", "AXE_ROADMAP.md#4b--custom-select-hardening" ], "core": [ "packages/core/src/components/atoms/input/index.ts", "packages/core/src/components/atoms/input/input-a11y.ts", "packages/core/src/components/atoms/input/input-otp-a11y.ts", "packages/core/src/components/atoms/input/input-otp-recipe.ts", "packages/core/src/components/atoms/input/input-otp-types.ts", "packages/core/src/components/atoms/input/input-recipe.ts", "packages/core/src/components/atoms/input/input-types.ts", "packages/core/src/components/atoms/input/rich-text-a11y.ts", "packages/core/src/components/atoms/input/rich-text-html.ts", "packages/core/src/components/atoms/input/rich-text-recipe.ts", "packages/core/src/components/atoms/input/rich-text-styles.ts", "packages/core/src/components/atoms/input/rich-text-types.ts", "packages/core/src/components/atoms/input/select-a11y.ts", "packages/core/src/components/atoms/input/select-recipe.ts", "packages/core/src/components/atoms/input/select-types.ts", "packages/core/src/components/atoms/input/textarea-a11y.ts", "packages/core/src/components/atoms/input/textarea-recipe.ts", "packages/core/src/components/atoms/input/textarea-types.ts" ], "presets": [ "packages/presets/src/firstEdition/input.css", "packages/presets/src/firstEdition/textarea.css", "packages/presets/src/firstEdition/select.css", "packages/presets/src/firstEdition/rich-text.css", "packages/presets/src/firstEdition/input-otp.css", "packages/presets/src/firstEdition/molecules/input-field.css" ], "react": [ "packages/react/src/components/input/__tests__/currency-field.test.tsx", "packages/react/src/components/input/__tests__/date-of-birth-field.test.tsx", "packages/react/src/components/input/__tests__/dropdown-field.test.tsx", "packages/react/src/components/input/__tests__/index-exports.test.ts", "packages/react/src/components/input/__tests__/input-field.test.tsx", "packages/react/src/components/input/__tests__/input-otp.test.tsx", "packages/react/src/components/input/__tests__/input.test.tsx", "packages/react/src/components/input/__tests__/rich-text-field.test.tsx", "packages/react/src/components/input/__tests__/rich-text.test.tsx", "packages/react/src/components/input/__tests__/select-field.test.tsx", "packages/react/src/components/input/__tests__/select.test.tsx", "packages/react/src/components/input/__tests__/textarea-field.test.tsx", "packages/react/src/components/input/__tests__/textarea.test.tsx", "packages/react/src/components/input/__tests__/zip-code-field.test.tsx", "packages/react/src/components/input/field-variants.tsx", "packages/react/src/components/input/index.ts", "packages/react/src/components/input/input-field.tsx", "packages/react/src/components/input/input-otp-field.tsx", "packages/react/src/components/input/input-otp.tsx", "packages/react/src/components/input/input.tsx", "packages/react/src/components/input/rich-text-field.tsx", "packages/react/src/components/input/rich-text.tsx", "packages/react/src/components/input/select-arrow-icon.tsx", "packages/react/src/components/input/select-field.tsx", "packages/react/src/components/input/select.tsx", "packages/react/src/components/input/textarea-field.tsx", "packages/react/src/components/input/textarea.tsx" ], "vue": [ "packages/vue/src/components/input/__tests__/currency-field.test.ts", "packages/vue/src/components/input/__tests__/date-of-birth-field.test.ts", "packages/vue/src/components/input/__tests__/dropdown-field.test.ts", "packages/vue/src/components/input/__tests__/index-exports.test.ts", "packages/vue/src/components/input/__tests__/input-field.test.ts", "packages/vue/src/components/input/__tests__/input-otp.test.ts", "packages/vue/src/components/input/__tests__/input.test.ts", "packages/vue/src/components/input/__tests__/rich-text-field.test.ts", "packages/vue/src/components/input/__tests__/rich-text.test.ts", "packages/vue/src/components/input/__tests__/select-field.test.ts", "packages/vue/src/components/input/__tests__/select.test.ts", "packages/vue/src/components/input/__tests__/textarea-field.test.ts", "packages/vue/src/components/input/__tests__/textarea.test.ts", "packages/vue/src/components/input/__tests__/zip-code-field.test.ts", "packages/vue/src/components/input/field-variants.ts", "packages/vue/src/components/input/index.ts", "packages/vue/src/components/input/input-field.ts", "packages/vue/src/components/input/input-otp-field.ts", "packages/vue/src/components/input/input-otp.ts", "packages/vue/src/components/input/input.ts", "packages/vue/src/components/input/rich-text-field.ts", "packages/vue/src/components/input/rich-text.ts", "packages/vue/src/components/input/select-arrow-icon.ts", "packages/vue/src/components/input/select-field.ts", "packages/vue/src/components/input/select.ts", "packages/vue/src/components/input/textarea-field.ts", "packages/vue/src/components/input/textarea.ts" ], "svelte": [ "packages/svelte/src/lib/components/input/CurrencyField.svelte", "packages/svelte/src/lib/components/input/DateOfBirthField.svelte", "packages/svelte/src/lib/components/input/DropdownField.svelte", "packages/svelte/src/lib/components/input/EmailField.svelte", "packages/svelte/src/lib/components/input/index.ts", "packages/svelte/src/lib/components/input/Input.svelte", "packages/svelte/src/lib/components/input/InputField.svelte", "packages/svelte/src/lib/components/input/InputOtp.svelte", "packages/svelte/src/lib/components/input/InputOtpField.svelte", "packages/svelte/src/lib/components/input/PasswordField.svelte", "packages/svelte/src/lib/components/input/PhoneField.svelte", "packages/svelte/src/lib/components/input/RichText.svelte", "packages/svelte/src/lib/components/input/RichTextField.svelte", "packages/svelte/src/lib/components/input/SearchField.svelte", "packages/svelte/src/lib/components/input/Select.svelte", "packages/svelte/src/lib/components/input/SelectField.svelte", "packages/svelte/src/lib/components/input/Textarea.svelte", "packages/svelte/src/lib/components/input/TextareaField.svelte", "packages/svelte/src/lib/components/input/types.ts", "packages/svelte/src/lib/components/input/URLField.svelte", "packages/svelte/src/lib/components/input/ZipCodeField.svelte" ], "storybookReact": [ "apps/storybook-react/src/stories/input/__tests__/input-introduction-docs.test.ts", "apps/storybook-react/src/stories/input/__tests__/input-taxonomy.test.ts", "apps/storybook-react/src/stories/input/currency-field.stories.tsx", "apps/storybook-react/src/stories/input/date-of-birth-field.stories.tsx", "apps/storybook-react/src/stories/input/dropdown-field.stories.tsx", "apps/storybook-react/src/stories/input/email-field.stories.tsx", "apps/storybook-react/src/stories/input/input-field.stories.tsx", "apps/storybook-react/src/stories/input/input-otp-field.stories.tsx", "apps/storybook-react/src/stories/input/input-otp.stories.tsx", "apps/storybook-react/src/stories/input/input.stories.tsx", "apps/storybook-react/src/stories/input/Introduction.mdx", "apps/storybook-react/src/stories/input/password-field.stories.tsx", "apps/storybook-react/src/stories/input/phone-field.stories.tsx", "apps/storybook-react/src/stories/input/rich-text-field.stories.tsx", "apps/storybook-react/src/stories/input/rich-text.stories.tsx", "apps/storybook-react/src/stories/input/search-field.stories.tsx", "apps/storybook-react/src/stories/input/select-field.stories.tsx", "apps/storybook-react/src/stories/input/select.stories.tsx", "apps/storybook-react/src/stories/input/textarea-field.stories.tsx", "apps/storybook-react/src/stories/input/textarea.stories.tsx", "apps/storybook-react/src/stories/input/url-field.stories.tsx", "apps/storybook-react/src/stories/input/zip-code-field.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/input/__tests__/input-introduction-docs.test.ts", "apps/storybook-vue/src/stories/input/__tests__/input-taxonomy.test.ts", "apps/storybook-vue/src/stories/input/currency-field.stories.ts", "apps/storybook-vue/src/stories/input/date-of-birth-field.stories.ts", "apps/storybook-vue/src/stories/input/dropdown-field.stories.ts", "apps/storybook-vue/src/stories/input/email-field.stories.ts", "apps/storybook-vue/src/stories/input/input-field.stories.ts", "apps/storybook-vue/src/stories/input/input-otp-field.stories.ts", "apps/storybook-vue/src/stories/input/input-otp.stories.ts", "apps/storybook-vue/src/stories/input/input.stories.ts", "apps/storybook-vue/src/stories/input/Introduction.mdx", "apps/storybook-vue/src/stories/input/password-field.stories.ts", "apps/storybook-vue/src/stories/input/phone-field.stories.ts", "apps/storybook-vue/src/stories/input/rich-text-field.stories.ts", "apps/storybook-vue/src/stories/input/rich-text.stories.ts", "apps/storybook-vue/src/stories/input/search-field.stories.ts", "apps/storybook-vue/src/stories/input/select-field.stories.css", "apps/storybook-vue/src/stories/input/select-field.stories.ts", "apps/storybook-vue/src/stories/input/select.stories.ts", "apps/storybook-vue/src/stories/input/textarea-field.stories.ts", "apps/storybook-vue/src/stories/input/textarea.stories.ts", "apps/storybook-vue/src/stories/input/url-field.stories.ts", "apps/storybook-vue/src/stories/input/zip-code-field.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/input/__tests__/input-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/input/currency-field.stories.ts", "apps/storybook-svelte/src/stories/input/date-of-birth-field.stories.ts", "apps/storybook-svelte/src/stories/input/dropdown-field.stories.ts", "apps/storybook-svelte/src/stories/input/email-field.stories.ts", "apps/storybook-svelte/src/stories/input/input-field.stories.ts", "apps/storybook-svelte/src/stories/input/input-otp-field.stories.ts", "apps/storybook-svelte/src/stories/input/input-otp.stories.ts", "apps/storybook-svelte/src/stories/input/input.stories.ts", "apps/storybook-svelte/src/stories/input/Introduction.mdx", "apps/storybook-svelte/src/stories/input/password-field.stories.ts", "apps/storybook-svelte/src/stories/input/phone-field.stories.ts", "apps/storybook-svelte/src/stories/input/rich-text-field.stories.ts", "apps/storybook-svelte/src/stories/input/rich-text.stories.ts", "apps/storybook-svelte/src/stories/input/search-field.stories.ts", "apps/storybook-svelte/src/stories/input/select-field.stories.ts", "apps/storybook-svelte/src/stories/input/select.stories.ts", "apps/storybook-svelte/src/stories/input/textarea-field.stories.ts", "apps/storybook-svelte/src/stories/input/textarea.stories.ts", "apps/storybook-svelte/src/stories/input/url-field.stories.ts", "apps/storybook-svelte/src/stories/input/zip-code-field.stories.ts" ], "contracts": [ "tests/contracts/input.contract.ts", "tests/contracts/input-field.contract.ts", "tests/contracts/select.contract.ts", "tests/contracts/select-field.contract.ts", "tests/contracts/select-combobox.contract.ts", "tests/contracts/dropdown-field.contract.ts", "tests/contracts/textarea.contract.ts", "tests/contracts/textarea-field.contract.ts", "tests/contracts/input-otp.contract.ts", "tests/contracts/rich-text.contract.ts", "tests/contracts/rich-text-field.contract.ts", "tests/contracts/date-of-birth-field.contract.ts", "tests/contracts/zip-code-field.contract.ts" ] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [ "dropdown", "search", "password", "email", "date-of-birth", "zip-code", "phone", "url", "currency" ], "purposeAttributes": { "dropdown": { "data-purpose": "dropdown" }, "search": { "data-purpose": "search" }, "password": { "data-purpose": "password" }, "email": { "data-purpose": "email" }, "date-of-birth": { "data-purpose": "date-of-birth" }, "zip-code": { "data-purpose": "zip-code" }, "phone": { "data-purpose": "phone" }, "url": { "data-purpose": "url" }, "currency": { "data-purpose": "currency", "data-currency": "" } }, "sourceOfTruthPaths": [ "packages/react/src/components/input/field-variants.tsx", "packages/vue/src/components/input/field-variants.ts", "packages/react/src/components/input/input-otp.tsx", "packages/vue/src/components/input/input-otp.ts", "packages/core/src/components/atoms/input/rich-text-styles.ts" ], "notes": [ "Input is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Family-level purpose metadata currently lives in adapter field-variant wrappers rather than the central semantic registry." ] }, "design": { "componentJsons": [ ".figma/marwes/components/text-field.json", ".figma/marwes/components/text-area.json", ".figma/marwes/components/select.json", ".figma/marwes/components/dropdown.json", ".figma/marwes/components/input-otp.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-input-fields/README.md", ".figma/marwes/pages/-input-otp/README.md" ], "pageReferences": [ ".figma/marwes/pages/-input-fields/-input-fields_1364-11372.json", ".figma/marwes/pages/-input-fields/-input-fields-dark_1368-5944.json", ".figma/marwes/pages/-input-fields/-input-types-overview_1364-11817.json", ".figma/marwes/pages/-input-fields/-input-types-overview-dark_1368-6014.json", ".figma/marwes/pages/-input-otp/-input-otp_1803-15024.json", ".figma/marwes/pages/-input-otp/-input-otp-dark_1803-15155.json" ], "nodeReferences": { "inputFieldsLightFrame": "1364:11372", "inputFieldsDarkFrame": "1368:5944", "inputTypesLightFrame": "1364:11817", "inputTypesDarkFrame": "1368:6014", "textField": "1364:7662", "textarea": "1364:7696", "searchField": "1364:7667", "passwordField": "1364:7673", "dateOfBirthField": "1364:7679", "phoneField": "1364:7685", "zipCodeField": "1364:7691", "dropdownField": "1364:7701", "selectAtom": "1364:7707", "inputOtpLightFrame": "1803:15024", "inputOtpDarkFrame": "1803:15155" }, "figmaTokens": [ "input/surface", "input/border", "input/label", "input/value", "input/placeholder", "input/hint" ], "figmaStates": { "baseVariants": [ "input", "textarea", "search", "password", "date-of-birth", "phone", "zip-code", "dropdown", "select", "input-otp", "rich-text-baseline" ], "interactionStates": ["default", "hover", "active", "disabled", "focus", "error"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Input is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Family-level purpose metadata currently lives in adapter field-variant wrappers rather than the central semantic registry.", "Generated from docs/registry/families/input/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "pagination", "readmePath": "docs/registry/families/pagination/README.md", "metaPath": "docs/registry/families/pagination/registry.meta.json", "generatedPath": "docs/registry/families/pagination/registry.generated.json", "visualPaths": [ "docs/registry/families/pagination/visuals/file-map.mmd", "docs/registry/families/pagination/visuals/interaction-map.mmd", "docs/registry/families/pagination/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "pagination", "displayName": "Pagination", "status": "shipped", "summary": "Finite page navigation with shared item-window generation, ellipsis rendering, current-page semantics, and React/Vue/Svelte adapters.", "philosophy": [ "Keep page-window generation in core so every adapter renders the same pages and ellipses.", "Use a labelled nav with list semantics so pagination is discoverable as page navigation.", "Keep visual dimensions in firstEdition CSS to preserve Figma fidelity without adapter-specific styles.", "Expose a compact controlled API in every framework while supporting uncontrolled starting state where idiomatic." ], "usage": { "useWhen": [ "A finite collection is split across known pages.", "Users need direct page jumps in addition to previous and next controls.", "The interface should show a compact page range with ellipses." ], "avoidWhen": [ "Content loads continuously — use infinite scroll or load more.", "Pages represent steps in a task flow — use a step navigator.", "The selection controls visible panel content — use tabs." ] }, "axe": { "riskTier": "medium", "auditStatus": "initial-implementation", "automationCovers": [ "Core recipe marks the current page with aria-current.", "Adapters disable previous and next controls at page boundaries.", "React, Vue, and Svelte render labelled navigation and page buttons.", "Storybook taxonomy tests across React, Vue, and Svelte." ], "manualReviewRequired": [ "Assistive-technology announcement of page changes in consuming product contexts.", "Keyboard focus order with surrounding data table controls.", "High-contrast appearance of selected and focused page items." ], "roadmapAnchors": [], "notes": [ "Initial implementation uses explicit page buttons and hidden ellipsis text for assistive technology.", "Page-change announcements can be added by consuming views when content updates asynchronously." ] }, "visuals": { "canonicalStories": { "react": ["apps/storybook-react/src/stories/pagination/pagination.stories.tsx"], "vue": ["apps/storybook-vue/src/stories/pagination/pagination.stories.ts"], "svelte": ["apps/storybook-svelte/src/stories/pagination/pagination.stories.ts"] }, "preferredStates": [ "default", "current", "first-page", "last-page", "disabled", "without-prev-next" ] }, "openQuestions": [ "Should a compact icon-only previous/next variant be added later?", "Should async page loading expose a busy/loading state on the root?" ] }, "generated": { "family": "pagination", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/pagination/index.ts", "packages/core/src/components/atoms/pagination/pagination-a11y.ts", "packages/core/src/components/atoms/pagination/pagination-recipe.ts", "packages/core/src/components/atoms/pagination/pagination-types.ts" ], "presets": ["packages/presets/src/firstEdition/pagination.css"], "react": [ "packages/react/src/components/pagination/__tests__/pagination.test.tsx", "packages/react/src/components/pagination/index.ts", "packages/react/src/components/pagination/pagination-field.tsx", "packages/react/src/components/pagination/pagination.tsx" ], "vue": [ "packages/vue/src/components/pagination/__tests__/pagination.test.ts", "packages/vue/src/components/pagination/index.ts", "packages/vue/src/components/pagination/pagination-field.ts", "packages/vue/src/components/pagination/pagination.ts" ], "svelte": [ "packages/svelte/src/lib/components/pagination/index.ts", "packages/svelte/src/lib/components/pagination/Pagination.svelte", "packages/svelte/src/lib/components/pagination/PaginationField.svelte", "packages/svelte/src/lib/components/pagination/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/pagination/__tests__/pagination-introduction-docs.test.ts", "apps/storybook-react/src/stories/pagination/__tests__/pagination-taxonomy.test.ts", "apps/storybook-react/src/stories/pagination/Introduction.mdx", "apps/storybook-react/src/stories/pagination/pagination-field.stories.tsx", "apps/storybook-react/src/stories/pagination/pagination.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/pagination/__tests__/pagination-introduction-docs.test.ts", "apps/storybook-vue/src/stories/pagination/__tests__/pagination-taxonomy.test.ts", "apps/storybook-vue/src/stories/pagination/Introduction.mdx", "apps/storybook-vue/src/stories/pagination/pagination-field.stories.ts", "apps/storybook-vue/src/stories/pagination/pagination.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/pagination/__tests__/pagination-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/pagination/__tests__/pagination-taxonomy.test.ts", "apps/storybook-svelte/src/stories/pagination/Introduction.mdx", "apps/storybook-svelte/src/stories/pagination/pagination-field.stories.ts", "apps/storybook-svelte/src/stories/pagination/pagination.stories.ts", "apps/storybook-svelte/src/stories/pagination/PaginationFieldPreview.svelte", "apps/storybook-svelte/src/stories/pagination/PaginationNarrowContainer.svelte", "apps/storybook-svelte/src/stories/pagination/PaginationPreview.svelte", "apps/storybook-svelte/src/stories/pagination/PaginationShowcase.svelte" ], "contracts": [] }, "semantics": { "coverageLevel": "none", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [], "notes": ["No semantic registry source has been configured for this family yet."] }, "design": { "componentJsons": [ ".figma/marwes/components/pagination.json", ".figma/marwes/components/partspaginationpage-item.json", ".figma/marwes/components/partspaginationactive-page-item.json", ".figma/marwes/components/partspaginationellipsis.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-pagination/overall-status_1730-4200.json", ".figma/marwes/pages/-pagination/-pagination_1727-4104.json", ".figma/marwes/pages/-pagination/-pagination-dark_1727-4253.json", ".figma/marwes/pages/-pagination/component-container_1729-4143.json", ".figma/marwes/pages/-v3-components-checklist/must-have-skeleton-needed-as-component-in-figma-though-nice_1384-12675.json", ".figma/marwes/pages/-v3-components-checklist/must-have-skeleton-needed-as-component-in-figma-though-nice_1896-33145.json" ], "nodeReferences": { "paginationComponent": "1727:3905", "paginationPageItem": "1727:3897", "paginationActivePageItem": "1727:3899", "paginationEllipsis": "1727:3903", "paginationLightFrame": "1727:4104", "paginationDarkFrame": "1727:4253" }, "figmaTokens": [ "pagination/active-surface", "pagination/active-text", "pagination/item-border", "pagination/item-surface", "pagination/item-text" ], "figmaStates": { "baseVariants": [ "with-prev-next", "without-prev-next", "page", "active-page", "ellipsis" ], "interactionStates": ["current", "disabled", "hover", "focus", "light", "dark"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "No semantic registry source has been configured for this family yet.", "Generated from docs/registry/families/pagination/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "paragraph", "readmePath": "docs/registry/families/paragraph/README.md", "metaPath": "docs/registry/families/paragraph/registry.meta.json", "generatedPath": "docs/registry/families/paragraph/registry.generated.json", "visualPaths": [ "docs/registry/families/paragraph/visuals/file-map.mmd", "docs/registry/families/paragraph/visuals/interaction-map.mmd", "docs/registry/families/paragraph/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "paragraph", "displayName": "Paragraph", "status": "shipped", "summary": "Native paragraph-text family with one raw Paragraph atom backed by a shared typography preset, theme defaults, and a shared React/Vue contract.", "philosophy": [ "Teach raw Paragraph as the canonical body-copy atom and keep spacing outside the component so layout decisions stay explicit.", "Keep native p semantics as the contract instead of inventing Marwes metadata where plain paragraph markup already expresses the meaning honestly.", "Treat size as a visual reading-context choice, not as a substitute for heading, label, list, or other richer semantic structure.", "Keep paragraph styling source-owned in theme typography and shared typography.css so Paragraph and Heading stay aligned." ], "usage": { "useWhen": [ "The UI needs real body copy, supporting text, or longer reading content that should remain plain paragraph text.", "The product wants React and Vue paragraph behavior to stay aligned through one core recipe, one shared typography preset, and one shared contract.", "The layout needs explicit control over surrounding spacing while still reusing Marwes typography defaults." ], "avoidWhen": [ "The content should be a real heading, label, caption, list item, or other more specific semantic element.", "The surface only needs visually styled text and cannot honestly be represented as a paragraph block.", "The team expects a family-local metadata layer or purpose-wrapper vocabulary that the current Paragraph family does not ship." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for default paragraph sizing and id passthrough behavior.", "Shared paragraph contract coverage across React and Vue for native p rendering, size classes, and id metadata.", "Storybook introduction and taxonomy tests in both apps for the atom teaching surface." ], "manualReviewRequired": [ "Product-level judgment about whether Paragraph is being used for real body copy instead of replacing headings, labels, or other richer structure.", "Readability review for long-form content, especially line length, spacing, and visual hierarchy in real layouts.", "Whether teams use size variants for reading emphasis rather than as a shortcut for semantic structure." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Paragraph completed a first-pass accessibility audit focused on body-copy semantics, size override honesty, and native-semantic documentation.", "The family now has expanded shared-contract coverage for the absence of family-local metadata plus explicit accessibility notes in both Storybook apps." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/paragraph/Introduction.mdx", "apps/storybook-react/src/stories/paragraph/paragraph.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/paragraph/Introduction.mdx", "apps/storybook-vue/src/stories/paragraph/paragraph.stories.ts" ] }, "preferredStates": [ "sm", "md", "lg", "all-sizes", "long-text", "multiple-paragraphs", "article-layout", "with-id", "light", "dark" ] }, "openQuestions": [ "Should the Paragraph size API keep the current sm/md/lg scale if the Figma typography baseline remains centered on 16px body styles rather than a full paragraph-size matrix?", "Should the local Figma sync eventually gain a dedicated paragraph component or clearer body-copy scale that maps directly to the shipped Paragraph API, or is the typography-page baseline sufficient?" ] }, "generated": { "family": "paragraph", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/paragraph-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/paragraph/index.ts", "packages/core/src/components/atoms/paragraph/paragraph-recipe.ts", "packages/core/src/components/atoms/paragraph/paragraph-types.ts" ], "presets": ["packages/presets/src/firstEdition/typography.css"], "react": [ "packages/react/src/components/paragraph/__tests__/paragraph.test.tsx", "packages/react/src/components/paragraph/index.ts", "packages/react/src/components/paragraph/paragraph.tsx" ], "vue": [ "packages/vue/src/components/paragraph/__tests__/paragraph.test.ts", "packages/vue/src/components/paragraph/index.ts", "packages/vue/src/components/paragraph/paragraph.ts" ], "svelte": [ "packages/svelte/src/lib/components/paragraph/index.ts", "packages/svelte/src/lib/components/paragraph/Paragraph.svelte", "packages/svelte/src/lib/components/paragraph/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/paragraph/__tests__/paragraph-introduction-docs.test.ts", "apps/storybook-react/src/stories/paragraph/__tests__/paragraph-taxonomy.test.ts", "apps/storybook-react/src/stories/paragraph/Introduction.mdx", "apps/storybook-react/src/stories/paragraph/paragraph.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/paragraph/__tests__/paragraph-introduction-docs.test.ts", "apps/storybook-vue/src/stories/paragraph/__tests__/paragraph-taxonomy.test.ts", "apps/storybook-vue/src/stories/paragraph/Introduction.mdx", "apps/storybook-vue/src/stories/paragraph/paragraph.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/paragraph/__tests__/paragraph-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/paragraph/Introduction.mdx", "apps/storybook-svelte/src/stories/paragraph/paragraph.stories.ts", "apps/storybook-svelte/src/stories/paragraph/ParagraphShowcase.svelte" ], "contracts": ["tests/contracts/paragraph.contract.ts"] }, "semantics": { "coverageLevel": "none", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/paragraph/paragraph-recipe.ts", "packages/core/src/theme/theme-defaults.ts", "packages/react/src/components/paragraph/paragraph.tsx", "packages/vue/src/components/paragraph/paragraph.ts", "tests/contracts/paragraph.contract.ts" ], "notes": [ "Paragraph relies on native p semantics rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; semantic meaning comes from the rendered paragraph element, while sizing comes from theme typography and the shared typography preset." ] }, "design": { "componentJsons": [], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/tokens/typography.json", ".figma/marwes/pages/-typography/README.md" ], "pageReferences": [ ".figma/marwes/pages/-typography/typography_1368-5656.json", ".figma/marwes/pages/-typography/typography_1368-5677.json", ".figma/marwes/pages/-typography/typography_1368-5698.json", ".figma/marwes/pages/-typography/typography_1368-5717.json" ], "nodeReferences": { "typographyLightSection": "1368:5656", "typographyDarkSection": "1368:5677", "bodyLightSection": "1368:5669", "bodyMediumLightRow": "1368:5671", "bodyDefaultLightRow": "1368:5742", "bodyDarkSection": "1368:5690", "bodyMediumDarkRow": "1368:5692", "bodyDefaultDarkRow": "1368:5746", "instrumentSansLightSection": "1368:5698", "instrumentSansDarkSection": "1368:5717" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["paragraph", "body-default", "body-medium"], "interactionStates": [ "sm", "md", "lg", "light", "dark", "typography-scale", "long-form" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Paragraph relies on native p semantics rather than the wave-1 central semantic registry.", "The family does not emit data-component or purpose metadata today; semantic meaning comes from the rendered paragraph element, while sizing comes from theme typography and the shared typography preset.", "Generated from docs/registry/families/paragraph/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "progress-bar", "readmePath": "docs/registry/families/progress-bar/README.md", "metaPath": "docs/registry/families/progress-bar/registry.meta.json", "generatedPath": "docs/registry/families/progress-bar/registry.generated.json", "visualPaths": [ "docs/registry/families/progress-bar/visuals/file-map.mmd", "docs/registry/families/progress-bar/visuals/interaction-map.mmd", "docs/registry/families/progress-bar/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "progress-bar", "displayName": "ProgressBar", "status": "shipped", "summary": "Determinate progress atom with optional label and percentage text, small/default Figma track sizes, and shared progressbar semantics across adapters.", "philosophy": [ "Keep ProgressBar as read-only status display, separate from Slider and SliderField input semantics.", "Keep value normalization and accessibility metadata in the core recipe so adapters only render the shared contract.", "Keep visual treatment in preset CSS through stable mw-progress-bar classes and theme-relative variables." ], "usage": { "useWhen": [ "The UI needs to communicate determinate completion, upload, import, or setup progress.", "A visible label and percentage should be displayed together with a compact track.", "React, Vue, and Svelte consumers need the same read-only progress semantics." ], "avoidWhen": [ "The user should adjust the value; use Slider or SliderField instead.", "The state is indeterminate; use Spinner or a loading-specific composition instead.", "The surrounding UI cannot provide a truthful accessible name when the visible label is hidden." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared React/Vue adapter contract tests for progressbar value metadata, clamping, label and percentage visibility, and disabled state metadata.", "Svelte adapter tests for progressbar rendering and small hidden-label usage.", "Storybook introduction/taxonomy tests and a11y smoke coverage in React, Vue, and Svelte Storybook apps." ], "manualReviewRequired": [ "Visual review against the synced light and dark Figma progress-bar frames.", "Product-level review when hiding the visible label so the accessible name remains truthful." ], "roadmapAnchors": [], "notes": [ "The dashboard teaser uses ProgressBar to avoid presenting a read-only completion value as an adjustable SliderField." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/progress-bar/Introduction.mdx", "apps/storybook-react/src/stories/progress-bar/progress-bar.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/progress-bar/Introduction.mdx", "apps/storybook-vue/src/stories/progress-bar/progress-bar.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/progress-bar/Introduction.mdx", "apps/storybook-svelte/src/stories/progress-bar/progress-bar.stories.ts" ] }, "preferredStates": [ "default", "hover", "pressed", "disabled", "focus", "small", "default-size", "without-label", "without-percentage" ] }, "openQuestions": [ "Should future design sources expose semantic progress intent colors beyond brand progress?" ] }, "generated": { "family": "progress-bar", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/progress-bar/index.ts", "packages/core/src/components/atoms/progress-bar/progress-bar-a11y.ts", "packages/core/src/components/atoms/progress-bar/progress-bar-recipe.ts", "packages/core/src/components/atoms/progress-bar/progress-bar-types.ts" ], "presets": ["packages/presets/src/firstEdition/progress-bar.css"], "react": [ "packages/react/src/components/progress-bar/__tests__/index-exports.test.tsx", "packages/react/src/components/progress-bar/__tests__/progress-bar.test.tsx", "packages/react/src/components/progress-bar/index.ts", "packages/react/src/components/progress-bar/progress-bar.tsx" ], "vue": [ "packages/vue/src/components/progress-bar/__tests__/index-exports.test.ts", "packages/vue/src/components/progress-bar/__tests__/progress-bar.test.ts", "packages/vue/src/components/progress-bar/index.ts", "packages/vue/src/components/progress-bar/progress-bar.ts" ], "svelte": [ "packages/svelte/src/lib/components/progress-bar/index.ts", "packages/svelte/src/lib/components/progress-bar/ProgressBar.svelte", "packages/svelte/src/lib/components/progress-bar/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/progress-bar/__tests__/progress-bar-introduction-docs.test.ts", "apps/storybook-react/src/stories/progress-bar/__tests__/progress-bar-taxonomy.test.ts", "apps/storybook-react/src/stories/progress-bar/Introduction.mdx", "apps/storybook-react/src/stories/progress-bar/progress-bar.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/progress-bar/__tests__/progress-bar-introduction-docs.test.ts", "apps/storybook-vue/src/stories/progress-bar/__tests__/progress-bar-taxonomy.test.ts", "apps/storybook-vue/src/stories/progress-bar/Introduction.mdx", "apps/storybook-vue/src/stories/progress-bar/progress-bar.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/progress-bar/__tests__/progress-bar-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/progress-bar/Introduction.mdx", "apps/storybook-svelte/src/stories/progress-bar/progress-bar.stories.ts", "apps/storybook-svelte/src/stories/progress-bar/ProgressBarShowcase.svelte" ], "contracts": ["tests/contracts/progress-bar.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "progress-bar", "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/progress-bar/progress-bar-recipe.ts" ], "notes": [ "ProgressBar is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=progress-bar plus local size, state, and disabled attributes from core." ] }, "design": { "componentJsons": [".figma/marwes/components/progress-bar.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-progress-bar/-progress-bar_1727-3932.json", ".figma/marwes/pages/-progress-bar/-progress-bar-dark_1727-4018.json" ], "nodeReferences": { "progressBarComponent": "1727:3852", "progressBarLightFrame": "1727:3932", "progressBarDarkFrame": "1727:4018" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["progress-bar", "small", "default"], "interactionStates": [ "default", "hover", "pressed", "disabled", "focus", "label", "percentage" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "ProgressBar is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=progress-bar plus local size, state, and disabled attributes from core.", "Generated from docs/registry/families/progress-bar/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "radio", "readmePath": "docs/registry/families/radio/README.md", "metaPath": "docs/registry/families/radio/registry.meta.json", "generatedPath": "docs/registry/families/radio/registry.generated.json", "visualPaths": [ "docs/registry/families/radio/visuals/file-map.mmd", "docs/registry/families/radio/visuals/interaction-map.mmd", "docs/registry/families/radio/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "radio", "displayName": "Radio", "status": "shipped", "summary": "Native single-selection family with a raw Radio atom, a canonical RadioGroupField path, and thin purpose-radio wrappers for common one-of-many choices.", "philosophy": [ "Teach RadioGroupField and the purpose-radio wrappers as the canonical labeled single-selection path, and keep raw Radio as the low-level escape hatch.", "Keep native input[type=radio] and radiogroup semantics as the real contract instead of inventing central metadata where standard HTML already expresses the meaning honestly.", "Keep description, error, and required wiring source-owned in shared field helpers so React and Vue stay aligned.", "Keep purpose-radio wrappers thin and semantic so they add stable intent metadata without becoming a second radio implementation." ], "usage": { "useWhen": [ "The UI needs one mutually exclusive choice from a small peer set, with optional description or error support.", "The product flow maps clearly to YesNoRadioGroup, RatingRadioGroup, or OptionRadioGroup and benefits from self-documenting purpose metadata.", "The team wants React and Vue radio behavior to stay aligned through one core recipe, shared field helpers, and the existing raw-radio contract." ], "avoidWhen": [ "Multiple selections are allowed and Checkbox or CheckboxGroupField is the more honest interaction model.", "A binary on/off toggle is being modeled and Switch is the clearer product contract.", "The layout cannot supply honest group labeling, shared names, and single-selection behavior for raw Radio usage outside RadioGroupField." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests plus the shared raw-radio contract across React and Vue for checked state, disabled behavior, and callback flow.", "Shared React and Vue radio-group-field contract coverage for group labeling, description wiring, error wiring, invalid propagation, required state, disabled handling, and controlled versus uncontrolled selection.", "Local React and Vue tests for the purpose-radio wrappers plus Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Real browser review for focus visibility and pressed or hover affordances because the family heavily restyles a native radio with appearance: none.", "Product-level judgment about whether required messaging, helper text, and error text remain clear for real grouped choice flows.", "Raw Radio usage outside RadioGroupField still depends on consumer-owned radiogroup naming and state management, so bespoke layouts deserve spot checks." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Radio completed a first-pass accessibility audit focused on grouped single-selection contract maturity and native-first field wiring.", "The family now has shared contracts for the raw atom and RadioGroupField across React and Vue, while purpose-wrapper metadata remains covered by local adapter tests." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/radio/Introduction.mdx", "apps/storybook-react/src/stories/radio/radio-group-field.stories.tsx", "apps/storybook-react/src/stories/radio/option-radio-group.stories.tsx", "apps/storybook-react/src/stories/radio/yes-no-radio-group.stories.tsx", "apps/storybook-react/src/stories/radio/rating-radio-group.stories.tsx", "apps/storybook-react/src/stories/radio/radio.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/radio/Introduction.mdx", "apps/storybook-vue/src/stories/radio/radio-group-field.stories.ts", "apps/storybook-vue/src/stories/radio/option-radio-group.stories.ts", "apps/storybook-vue/src/stories/radio/yes-no-radio-group.stories.ts", "apps/storybook-vue/src/stories/radio/rating-radio-group.stories.ts", "apps/storybook-vue/src/stories/radio/radio.stories.ts" ] }, "preferredStates": [ "selected", "unselected", "default", "hover", "pressed", "disabled", "focus", "error", "group", "yes-no", "rating", "option", "light", "dark" ] }, "openQuestions": [ "Which Radio-family stories should join the first automated accessibility smoke set?", "Should the family-local purpose vocabulary (binary-choice, rating, selection) stay adapter-local, or move into the central semantic registry if Radio becomes a governed semantic family?" ] }, "generated": { "family": "radio", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/radio-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/radio/index.ts", "packages/core/src/components/atoms/radio/radio-a11y.ts", "packages/core/src/components/atoms/radio/radio-recipe.ts", "packages/core/src/components/atoms/radio/radio-types.ts" ], "presets": [ "packages/presets/src/firstEdition/radio.css", "packages/presets/src/firstEdition/molecules/radio-group-field.css" ], "react": [ "packages/react/src/components/radio/__tests__/radio-group-field.test.tsx", "packages/react/src/components/radio/__tests__/radio.test.tsx", "packages/react/src/components/radio/__tests__/variants.test.tsx", "packages/react/src/components/radio/index.ts", "packages/react/src/components/radio/radio-group-field.tsx", "packages/react/src/components/radio/radio.tsx", "packages/react/src/components/radio/variants.tsx" ], "vue": [ "packages/vue/src/components/radio/__tests__/radio-group-field.test.ts", "packages/vue/src/components/radio/__tests__/radio.test.ts", "packages/vue/src/components/radio/__tests__/variants.test.ts", "packages/vue/src/components/radio/index.ts", "packages/vue/src/components/radio/radio-group-field.ts", "packages/vue/src/components/radio/radio.ts", "packages/vue/src/components/radio/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/radio/index.ts", "packages/svelte/src/lib/components/radio/OptionRadioGroup.svelte", "packages/svelte/src/lib/components/radio/Radio.svelte", "packages/svelte/src/lib/components/radio/RadioGroupField.svelte", "packages/svelte/src/lib/components/radio/RatingRadioGroup.svelte", "packages/svelte/src/lib/components/radio/types.ts", "packages/svelte/src/lib/components/radio/YesNoRadioGroup.svelte" ], "storybookReact": [ "apps/storybook-react/src/stories/radio/__tests__/radio-introduction-docs.test.ts", "apps/storybook-react/src/stories/radio/__tests__/radio-taxonomy.test.ts", "apps/storybook-react/src/stories/radio/Introduction.mdx", "apps/storybook-react/src/stories/radio/option-radio-group.stories.tsx", "apps/storybook-react/src/stories/radio/radio-group-field.stories.tsx", "apps/storybook-react/src/stories/radio/radio.stories.tsx", "apps/storybook-react/src/stories/radio/rating-radio-group.stories.tsx", "apps/storybook-react/src/stories/radio/yes-no-radio-group.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/radio/__tests__/radio-introduction-docs.test.ts", "apps/storybook-vue/src/stories/radio/__tests__/radio-taxonomy.test.ts", "apps/storybook-vue/src/stories/radio/Introduction.mdx", "apps/storybook-vue/src/stories/radio/option-radio-group.stories.ts", "apps/storybook-vue/src/stories/radio/radio-group-field.stories.ts", "apps/storybook-vue/src/stories/radio/radio.stories.ts", "apps/storybook-vue/src/stories/radio/rating-radio-group.stories.ts", "apps/storybook-vue/src/stories/radio/yes-no-radio-group.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/radio/__tests__/radio-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/radio/__tests__/radio-taxonomy.test.ts", "apps/storybook-svelte/src/stories/radio/Introduction.mdx", "apps/storybook-svelte/src/stories/radio/option-radio-group.stories.ts", "apps/storybook-svelte/src/stories/radio/radio-group-field.stories.ts", "apps/storybook-svelte/src/stories/radio/radio.stories.ts", "apps/storybook-svelte/src/stories/radio/RadioGroupFieldStory.svelte", "apps/storybook-svelte/src/stories/radio/RadioShowcase.svelte", "apps/storybook-svelte/src/stories/radio/rating-radio-group.stories.ts", "apps/storybook-svelte/src/stories/radio/yes-no-radio-group.stories.ts" ], "contracts": ["tests/contracts/radio.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": ["binary-choice", "rating", "selection"], "purposeAttributes": { "binary-choice": { "data-purpose": "binary-choice" }, "rating": { "data-purpose": "rating" }, "selection": { "data-purpose": "selection" } }, "sourceOfTruthPaths": [ "packages/core/src/shared/field-helpers.ts", "packages/react/src/components/radio/radio-group-field.tsx", "packages/react/src/components/radio/variants.tsx", "packages/vue/src/components/radio/radio-group-field.ts", "packages/vue/src/components/radio/variants.ts" ], "notes": [ "Radio is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Family-local purpose metadata currently lives in the React and Vue purpose-radio wrappers, while the raw atom and group field rely on native input[type=radio], role=radiogroup, and shared field-helper wiring." ] }, "design": { "componentJsons": [ ".figma/marwes/components/radio-button.json", ".figma/marwes/components/radio-group.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-radio-button/README.md" ], "pageReferences": [ ".figma/marwes/pages/-radio-button/-radio-button_1368-6734.json", ".figma/marwes/pages/-radio-button/-radio-button-dark_2276-51787.json", ".figma/marwes/pages/-radio-button/-radio-button-dark_2969-11557.json", ".figma/marwes/pages/-radio-button/-radio-button_2969-10998.json" ], "nodeReferences": { "radioButtonComponentSet": "1368:6733", "radioGroupComponent": "1368:6450", "radioLightFrame": "1368:6734", "radioDarkFrame": "2276:51787" }, "figmaTokens": ["radio/surface", "radio/border", "radio/dot", "radio/label"], "figmaStates": { "baseVariants": ["radio-button", "radio-group"], "interactionStates": [ "selected", "unselected", "default", "hover", "pressed", "disabled", "focus", "error", "label-right", "label-left", "light", "dark" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Radio is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Family-local purpose metadata currently lives in the React and Vue purpose-radio wrappers, while the raw atom and group field rely on native input[type=radio], role=radiogroup, and shared field-helper wiring.", "Generated from docs/registry/families/radio/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "segmented-control", "readmePath": "docs/registry/families/segmented-control/README.md", "metaPath": "docs/registry/families/segmented-control/registry.meta.json", "generatedPath": "docs/registry/families/segmented-control/registry.generated.json", "visualPaths": [ "docs/registry/families/segmented-control/visuals/file-map.mmd", "docs/registry/families/segmented-control/visuals/interaction-map.mmd", "docs/registry/families/segmented-control/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "segmented-control", "displayName": "Segmented Control", "status": "shipped", "summary": "Single-select segmented toggle family with radiogroup semantics, keyboard navigation, and three visual variants (default, inverse, pill).", "philosophy": [ "Teach SegmentedControl as the single canonical surface — no raw atom escape hatch needed since the component is already minimal.", "Use radiogroup semantics for single-select behavior without associated panels, distinguishing this family from tabs.", "Keep keyboard navigation (Arrow keys, Home, End) and value resolution in core so all adapters stay aligned.", "Token-based styling through CSS custom properties means dark mode and theming work automatically without adapter-level logic." ], "usage": { "useWhen": [ "The UI needs a compact single-select toggle between 2–4 options with no associated panel content.", "Theme switching, view density controls, framework selectors, or similar compact option sets.", "The team wants React, Vue, and Svelte segmented behavior to stay aligned through shared core recipes." ], "avoidWhen": [ "The selection controls associated panel content — use TabGroup instead.", "There are more than 4 options — consider a dropdown or radio group.", "A binary on/off toggle is more appropriate — use Switch instead.", "The options need rich content or descriptions — use a radio group field." ] }, "axe": { "riskTier": "medium", "auditStatus": "initial-implementation", "automationCovers": [ "Core recipe generates correct role=radiogroup and role=radio attributes.", "Keyboard navigation (ArrowLeft, ArrowRight, Home, End) cycles through enabled items.", "Disabled items are skipped during keyboard navigation.", "aria-checked reflects selected state correctly.", "Storybook taxonomy tests across React, Vue, and Svelte." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for radio-group announcement patterns.", "Focus visibility and roving tabindex feel across screen readers.", "High-contrast mode appearance of the active pill indicator." ], "roadmapAnchors": [], "notes": [ "Initial implementation ships with radiogroup semantics rather than tablist because no panel content is associated.", "Future audit should confirm that screen readers announce the group label and checked state transitions cleanly." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/segmented-control/segmented-control.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/segmented-control/segmented-control.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/segmented-control/segmented-control.stories.ts" ] }, "preferredStates": ["default", "selected", "disabled", "hover", "focus"] }, "openQuestions": [ "Should purpose variants (e.g. ThemeToggle, ViewDensityToggle) be added as thin wrappers?", "Should the family support an animated sliding indicator for the active pill?" ] }, "generated": { "family": "segmented-control", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/segmented-control/index.ts", "packages/core/src/components/atoms/segmented-control/segmented-control-a11y.ts", "packages/core/src/components/atoms/segmented-control/segmented-control-recipe.ts", "packages/core/src/components/atoms/segmented-control/segmented-control-types.ts" ], "presets": ["packages/presets/src/firstEdition/segmented-control.css"], "react": [ "packages/react/src/components/segmented-control/index.ts", "packages/react/src/components/segmented-control/segmented-control-field.tsx", "packages/react/src/components/segmented-control/segmented-control.tsx" ], "vue": [ "packages/vue/src/components/segmented-control/index.ts", "packages/vue/src/components/segmented-control/segmented-control-field.ts", "packages/vue/src/components/segmented-control/segmented-control.ts" ], "svelte": [ "packages/svelte/src/lib/components/segmented-control/index.ts", "packages/svelte/src/lib/components/segmented-control/SegmentedControl.svelte", "packages/svelte/src/lib/components/segmented-control/SegmentedControlField.svelte", "packages/svelte/src/lib/components/segmented-control/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/segmented-control/__tests__/segmented-control-introduction-docs.test.ts", "apps/storybook-react/src/stories/segmented-control/__tests__/segmented-control-taxonomy.test.ts", "apps/storybook-react/src/stories/segmented-control/Introduction.mdx", "apps/storybook-react/src/stories/segmented-control/segmented-control-field.stories.tsx", "apps/storybook-react/src/stories/segmented-control/segmented-control.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/segmented-control/__tests__/segmented-control-introduction-docs.test.ts", "apps/storybook-vue/src/stories/segmented-control/__tests__/segmented-control-taxonomy.test.ts", "apps/storybook-vue/src/stories/segmented-control/Introduction.mdx", "apps/storybook-vue/src/stories/segmented-control/segmented-control-field.stories.ts", "apps/storybook-vue/src/stories/segmented-control/segmented-control.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/segmented-control/__tests__/segmented-control-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/segmented-control/__tests__/segmented-control-taxonomy.test.ts", "apps/storybook-svelte/src/stories/segmented-control/Introduction.mdx", "apps/storybook-svelte/src/stories/segmented-control/segmented-control-field.stories.ts", "apps/storybook-svelte/src/stories/segmented-control/segmented-control.stories.ts", "apps/storybook-svelte/src/stories/segmented-control/SegmentedControlFieldPreview.svelte", "apps/storybook-svelte/src/stories/segmented-control/SegmentedControlPreview.svelte", "apps/storybook-svelte/src/stories/segmented-control/SegmentedControlShowcase.svelte" ], "contracts": [] }, "semantics": { "coverageLevel": "none", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [], "notes": ["No semantic registry source has been configured for this family yet."] }, "design": { "componentJsons": [".figma/marwes/components/segmented-control.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-segmented-control/-segmented-control_1571-19406.json", ".figma/marwes/pages/-segmented-control/-segmented-control_2702-10336.json", ".figma/marwes/pages/------playground---dashboard/segmented-control_2832-29116.json", ".figma/marwes/pages/------playground---dashboard/segmented-control_2832-29118.json", ".figma/marwes/pages/------playground---dashboard/segmented-control_2832-29119.json", ".figma/marwes/pages/------playground---dashboard/segmented-control_2832-29120.json" ], "nodeReferences": { "segmentedControlComponentSet": "1571:19333", "segmentedControlShowcaseFrame": "1571:19406" }, "figmaTokens": [], "figmaStates": { "baseVariants": [ "2-segments", "3-segments", "4-segments", "icon", "no-icon", "inverse", "default" ], "interactionStates": ["active", "inactive", "disabled", "hover", "focus"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "No semantic registry source has been configured for this family yet.", "Generated from docs/registry/families/segmented-control/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "skeleton", "readmePath": "docs/registry/families/skeleton/README.md", "metaPath": "docs/registry/families/skeleton/registry.meta.json", "generatedPath": "docs/registry/families/skeleton/registry.generated.json", "visualPaths": [ "docs/registry/families/skeleton/visuals/file-map.mmd", "docs/registry/families/skeleton/visuals/interaction-map.mmd", "docs/registry/families/skeleton/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "skeleton", "displayName": "Skeleton", "status": "shipped", "summary": "Loading-placeholder component with text, circular, and rectangular shapes mapped from the synced Figma Skeleton page into one core recipe and shared React, Vue, and Svelte behavior.", "philosophy": [ "Keep Skeleton as a low-level loading placeholder atom rather than a layout-specific card or list skeleton family.", "Keep the three synced baseline shapes source-owned in core so React, Vue, and Svelte render the same dimensions, radius rules, metadata, and accessibility behavior.", "Keep visual treatment in preset CSS through stable mw-skeleton classes and theme-relative variables instead of adapter-owned styling.", "Keep the atom decorative by default, with explicit ariaLabel opt-in for standalone status usage." ], "usage": { "useWhen": [ "The UI needs a lightweight placeholder for loading text, avatar/media circles, or rectangular content blocks.", "The product already owns the surrounding loading context and the skeleton can stay decorative.", "React, Vue, and Svelte consumers should receive the same placeholder dimensions, shape variants, animation choices, and accessibility contract." ], "avoidWhen": [ "The experience needs determinate progress, percentage tracking, or an indeterminate activity indicator instead of structural placeholders.", "The implementation cannot provide a truthful ariaLabel when a standalone skeleton region must announce loading status.", "The product needs a layout-specific skeleton composition that should live as an adapter/story composition rather than core atom API." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for decorative defaults, Figma baseline dimensions, custom dimensions, animation modes, and standalone status mode.", "Preset CSS contract tests for the Figma 4% text overlay mapping plus pulse and wave animation hooks.", "Shared React/Vue adapter contract tests for DOM metadata, accessibility output, dimensions, and animation classes.", "Storybook introduction/taxonomy tests and a11y smoke coverage in both React and Vue Storybook apps." ], "manualReviewRequired": [ "Product-level decisions about when a skeleton is decorative versus when a loading region needs an announced status label.", "Visual review against the synced Figma page after V3 Skeleton design-system sources become more complete." ], "roadmapAnchors": [], "notes": [ "The current Figma source is V2/MUI-derived and only provides baseline shapes, so this family intentionally ships a small atom API first." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/skeleton/Introduction.mdx", "apps/storybook-react/src/stories/skeleton/skeleton.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/skeleton/Introduction.mdx", "apps/storybook-vue/src/stories/skeleton/skeleton.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/skeleton/Introduction.mdx", "apps/storybook-svelte/src/stories/skeleton/skeleton.stories.ts" ] }, "preferredStates": [ "text", "circular", "rectangular", "pulse", "wave", "none", "decorative", "status", "custom-size" ] }, "openQuestions": [ "Should V3 introduce named layout skeleton compositions after the design source graduates from the V2/MUI-derived baseline page?" ] }, "generated": { "family": "skeleton", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/skeleton/index.ts", "packages/core/src/components/atoms/skeleton/skeleton-a11y.ts", "packages/core/src/components/atoms/skeleton/skeleton-recipe.ts", "packages/core/src/components/atoms/skeleton/skeleton-types.ts" ], "presets": ["packages/presets/src/firstEdition/skeleton.css"], "react": [ "packages/react/src/components/skeleton/__tests__/index-exports.test.tsx", "packages/react/src/components/skeleton/__tests__/skeleton.test.tsx", "packages/react/src/components/skeleton/index.ts", "packages/react/src/components/skeleton/skeleton.tsx" ], "vue": [ "packages/vue/src/components/skeleton/__tests__/index-exports.test.ts", "packages/vue/src/components/skeleton/__tests__/skeleton.test.ts", "packages/vue/src/components/skeleton/index.ts", "packages/vue/src/components/skeleton/skeleton.ts" ], "svelte": [ "packages/svelte/src/lib/components/skeleton/index.ts", "packages/svelte/src/lib/components/skeleton/Skeleton.svelte", "packages/svelte/src/lib/components/skeleton/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/skeleton/__tests__/skeleton-introduction-docs.test.ts", "apps/storybook-react/src/stories/skeleton/__tests__/skeleton-taxonomy.test.ts", "apps/storybook-react/src/stories/skeleton/Introduction.mdx", "apps/storybook-react/src/stories/skeleton/skeleton-molecules.stories.tsx", "apps/storybook-react/src/stories/skeleton/skeleton.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/skeleton/__tests__/skeleton-introduction-docs.test.ts", "apps/storybook-vue/src/stories/skeleton/__tests__/skeleton-taxonomy.test.ts", "apps/storybook-vue/src/stories/skeleton/Introduction.mdx", "apps/storybook-vue/src/stories/skeleton/skeleton-molecules.stories.ts", "apps/storybook-vue/src/stories/skeleton/skeleton.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/skeleton/__tests__/skeleton-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/skeleton/Introduction.mdx", "apps/storybook-svelte/src/stories/skeleton/skeleton-molecules.stories.ts", "apps/storybook-svelte/src/stories/skeleton/skeleton.stories.ts", "apps/storybook-svelte/src/stories/skeleton/SkeletonMolecules.svelte", "apps/storybook-svelte/src/stories/skeleton/SkeletonShowcase.svelte" ], "contracts": ["tests/contracts/skeleton.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "skeleton", "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": ["packages/core/src/components/atoms/skeleton/skeleton-recipe.ts"], "notes": [ "Skeleton is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=skeleton plus local variant and animation attributes from core." ] }, "design": { "componentJsons": [], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/-skeleton/skeleton_1921-34816.json", ".figma/marwes/pages/-v3-components-checklist/must-have-skeleton-needed-as-component-in-figma-though-nice_1896-33145.json" ], "nodeReferences": { "skeletonBaselineFrame": "1921:34816", "skeletonChecklistItem": "1896:33145" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["text", "circular", "rectangular"], "interactionStates": ["pulse", "wave", "none", "decorative", "status", "custom-size"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Skeleton is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=skeleton plus local variant and animation attributes from core.", "Generated from docs/registry/families/skeleton/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "slider", "readmePath": "docs/registry/families/slider/README.md", "metaPath": "docs/registry/families/slider/registry.meta.json", "generatedPath": "docs/registry/families/slider/registry.generated.json", "visualPaths": [ "docs/registry/families/slider/visuals/file-map.mmd", "docs/registry/families/slider/visuals/interaction-map.mmd", "docs/registry/families/slider/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "slider", "displayName": "Slider", "status": "shipped", "summary": "Continuous-value input family with a native range slider atom, a canonical SliderField path, and thin purpose-slider wrappers.", "philosophy": [ "Teach SliderField as the canonical labeled range-control surface and keep raw Slider as the low-level escape hatch.", "Keep native range semantics, numeric normalization, and current-value clamping in core so React and Vue stay aligned.", "Treat tooltip and touch-area affordances as visual layers that must not replace visible labeling or ariaValueText.", "Keep purpose-slider wrappers thin and semantic so they add meaning without becoming a second slider implementation." ], "usage": { "useWhen": [ "The UI needs a continuous or stepped numeric control with visible labeling, optional description, and optional error support.", "The product flow maps clearly to VolumeSlider, BrightnessSlider, or RadiusSlider and benefits from self-documenting purpose metadata.", "The team wants React and Vue slider behavior to stay aligned through one native-first core recipe and one shared contract file." ], "avoidWhen": [ "A different control such as radio, segmented control, tabs, or direct numeric input is the more honest interaction model.", "The implementation cannot own visible labeling or described-by wiring while using the raw Slider escape hatch.", "The team expects dual-thumb ranges, non-native slider semantics, or richer value presentation that this family does not currently define." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared slider contract coverage across React and Vue for native range metadata, controlled and uncontrolled value behavior, disabled semantics, tooltip display, and SliderField wiring.", "Local adapter tests for raw slider behavior and purpose-wrapper metadata in both frameworks.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for announcement quality, focus feel, and native range interaction expectations.", "Future decisions about which slider stories should join stricter automated accessibility gates.", "Whether future keyboard-proof coverage should go beyond the current native smoke-contract boundary." ], "roadmapAnchors": [ "AXE_ROADMAP.md#p2--second-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "notes": [ "Slider completed a first-pass audit and now has an explicit spec-backed family contract.", "The family still sits outside the wave-1 central semantic registry even though the atom and purpose wrappers already emit useful local metadata." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/slider/Introduction.mdx", "apps/storybook-react/src/stories/slider/slider-field.stories.tsx", "apps/storybook-react/src/stories/slider/slider.stories.tsx", "apps/storybook-react/src/stories/slider/volume-slider.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/slider/Introduction.mdx", "apps/storybook-vue/src/stories/slider/slider-field.stories.ts", "apps/storybook-vue/src/stories/slider/slider.stories.ts", "apps/storybook-vue/src/stories/slider/volume-slider.stories.ts" ] }, "preferredStates": [ "default", "hover-track", "hover-thumb", "pressed", "disabled", "focus", "tooltip", "touch-area", "top-labels", "inline-labels" ] }, "openQuestions": [ "Which Slider-family stories should later join automated accessibility gates?", "Should future slider keyboard-matrix proof move beyond native smoke coverage, or is the native range baseline enough for the supported family contract?" ] }, "generated": { "family": "slider", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/slider-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#p2--second-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "core": [ "packages/core/src/components/atoms/slider/index.ts", "packages/core/src/components/atoms/slider/slider-a11y.ts", "packages/core/src/components/atoms/slider/slider-recipe.ts", "packages/core/src/components/atoms/slider/slider-types.ts" ], "presets": [ "packages/presets/src/firstEdition/slider.css", "packages/presets/src/firstEdition/molecules/slider-field.css" ], "react": [ "packages/react/src/components/slider/__tests__/slider-field.test.tsx", "packages/react/src/components/slider/__tests__/slider.test.tsx", "packages/react/src/components/slider/__tests__/variants.test.tsx", "packages/react/src/components/slider/index.ts", "packages/react/src/components/slider/slider-field.tsx", "packages/react/src/components/slider/slider.tsx", "packages/react/src/components/slider/variants.tsx" ], "vue": [ "packages/vue/src/components/slider/__tests__/slider-field.test.ts", "packages/vue/src/components/slider/__tests__/slider.test.ts", "packages/vue/src/components/slider/__tests__/variants.test.ts", "packages/vue/src/components/slider/index.ts", "packages/vue/src/components/slider/slider-field.ts", "packages/vue/src/components/slider/slider.ts", "packages/vue/src/components/slider/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/slider/BrightnessSlider.svelte", "packages/svelte/src/lib/components/slider/index.ts", "packages/svelte/src/lib/components/slider/RadiusSlider.svelte", "packages/svelte/src/lib/components/slider/Slider.svelte", "packages/svelte/src/lib/components/slider/SliderField.svelte", "packages/svelte/src/lib/components/slider/types.ts", "packages/svelte/src/lib/components/slider/VolumeSlider.svelte" ], "storybookReact": [ "apps/storybook-react/src/stories/slider/__tests__/slider-introduction-docs.test.ts", "apps/storybook-react/src/stories/slider/__tests__/slider-taxonomy.test.ts", "apps/storybook-react/src/stories/slider/brightness-slider.stories.tsx", "apps/storybook-react/src/stories/slider/Introduction.mdx", "apps/storybook-react/src/stories/slider/radius-slider.stories.tsx", "apps/storybook-react/src/stories/slider/slider-field.stories.tsx", "apps/storybook-react/src/stories/slider/slider.stories.tsx", "apps/storybook-react/src/stories/slider/volume-slider.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/slider/__tests__/slider-introduction-docs.test.ts", "apps/storybook-vue/src/stories/slider/__tests__/slider-taxonomy.test.ts", "apps/storybook-vue/src/stories/slider/brightness-slider.stories.ts", "apps/storybook-vue/src/stories/slider/Introduction.mdx", "apps/storybook-vue/src/stories/slider/radius-slider.stories.ts", "apps/storybook-vue/src/stories/slider/slider-field.stories.ts", "apps/storybook-vue/src/stories/slider/slider.stories.ts", "apps/storybook-vue/src/stories/slider/volume-slider.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/slider/__tests__/slider-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/slider/__tests__/slider-taxonomy.test.ts", "apps/storybook-svelte/src/stories/slider/brightness-slider.stories.ts", "apps/storybook-svelte/src/stories/slider/Introduction.mdx", "apps/storybook-svelte/src/stories/slider/radius-slider.stories.ts", "apps/storybook-svelte/src/stories/slider/slider-field.stories.ts", "apps/storybook-svelte/src/stories/slider/slider.stories.ts", "apps/storybook-svelte/src/stories/slider/volume-slider.stories.ts" ], "contracts": ["tests/contracts/slider.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "slider", "canonicalAttributes": [], "allowedPurposes": ["volume", "brightness", "radius"], "purposeAttributes": { "volume": { "data-purpose": "volume" }, "brightness": { "data-purpose": "brightness" }, "radius": { "data-purpose": "radius" } }, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/slider/slider-recipe.ts", "packages/core/src/shared/field-helpers.ts", "packages/react/src/components/slider/variants.tsx", "packages/vue/src/components/slider/variants.ts" ], "notes": [ "Slider is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=slider from core, while purpose-slider metadata currently lives in the React and Vue wrappers." ] }, "design": { "componentJsons": [ ".figma/marwes/components/slider.json", ".figma/marwes/components/slider-field.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-slider/README.md" ], "pageReferences": [ ".figma/marwes/pages/slider-archive/slider_1926-3827.json", ".figma/marwes/pages/slider-archive/slider-field_1926-3720.json", ".figma/marwes/pages/-slider/-slider_2462-11678.json", ".figma/marwes/pages/-slider/-slider_2464-13677.json" ], "nodeReferences": { "sliderComponentSet": "1926:3827", "sliderFieldComponentSet": "1926:3720" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["slider", "slider-field", "volume", "brightness", "radius"], "interactionStates": [ "default", "hover-track", "hover-thumb", "pressed", "disabled", "focus", "tooltip", "touch-area", "top-labels", "inline-labels" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Slider is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=slider from core, while purpose-slider metadata currently lives in the React and Vue wrappers.", "Generated from docs/registry/families/slider/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "spacing", "readmePath": "docs/registry/families/spacing/README.md", "metaPath": "docs/registry/families/spacing/registry.meta.json", "generatedPath": "docs/registry/families/spacing/registry.generated.json", "visualPaths": [ "docs/registry/families/spacing/visuals/file-map.mmd", "docs/registry/families/spacing/visuals/interaction-map.mmd", "docs/registry/families/spacing/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "spacing", "displayName": "Spacing", "status": "shipped", "summary": "Family-local layout-spacing family with one decorative Spacing atom backed by a token scale, a scale multiplier escape hatch, and shared React/Vue adapter parity.", "philosophy": [ "Teach Spacing as a decorative layout primitive and keep content structure, grouping, and section meaning outside the component.", "Keep the token scale explicit through Spacings so teams avoid ad hoc magic-number margins where a shared spacer is the honest tool.", "Treat scale as a deliberate escape hatch for uncommon layout tuning rather than the default way of inventing new spacing sizes.", "Keep the family-local metadata honest: Spacing emits stable data-component and data-size values from core, but it is not part of the wave-1 central semantic registry and currently has no dedicated Figma family source." ], "usage": { "useWhen": [ "The layout needs an explicit decorative vertical gap between elements and the team wants that gap to come from the shared spacing token scale.", "The product wants React and Vue spacing behavior to stay aligned through one core recipe and one shared token vocabulary.", "The surrounding composition benefits from a visible spacer primitive instead of many one-off margins spread across sibling elements." ], "avoidWhen": [ "The layout should be expressed more honestly through parent gap, stack, grid, or section structure rather than a standalone spacer element.", "The visual gap would be carrying semantic meaning that should instead come from headings, dividers, lists, or field grouping.", "The team expects a dedicated Figma component family or central semantic-registry entry that the current Spacing family does not ship." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Storybook introduction and taxonomy tests in both apps for the atom teaching surface and token-scale documentation.", "Repo-wide typecheck and build paths exercise the exported Spacing atom and Spacings constant in both adapters.", "Registry generation and link checks keep the structural docs surface aligned with the shipped file tree." ], "manualReviewRequired": [ "Product-level judgment about whether Spacing is the honest layout tool, versus parent-owned gap, section structure, or semantic separators.", "Visual review that larger spacer sizes are not being used to imply hidden hierarchy or compensate for weak layout structure.", "A future decision on whether this tiny family needs direct runtime contract tests, or whether its current docs-led coverage is sufficient." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Spacing completed a first-pass accessibility audit focused on decorative-only usage, layout-honesty guidance, and direct runtime contract coverage.", "The family now has core recipe tests, a shared spacing contract, dedicated React/Vue adapter tests, and a documented Vue scale-prop parity fix." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/spacing/Introduction.mdx", "apps/storybook-react/src/stories/spacing/spacing.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/spacing/Introduction.mdx", "apps/storybook-vue/src/stories/spacing/spacing.stories.ts" ] }, "preferredStates": [ "sp-0", "sp-2", "sp-4", "sp-8", "sp-16", "sp-24", "sp-32", "sp-40", "sp-48", "sp-56", "sp-64", "sp-72", "sp-80", "sp-88", "sp-96", "sp-104", "sp-120", "scale-multiplier", "in-context" ] }, "openQuestions": [ "Should Spacing gain a dedicated runtime contract or adapter test file, or is docs-led coverage sufficient for a decorative family this small?", "Should the local Figma sync eventually gain a dedicated spacing family or token page that maps directly to the shipped 18-size spacing scale, or is the current code-owned token source sufficient?" ] }, "generated": { "family": "spacing", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/spacing-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/spacing/index.ts", "packages/core/src/components/atoms/spacing/spacing.recipe.ts", "packages/core/src/components/atoms/spacing/spacing.types.ts" ], "presets": [ "packages/presets/src/firstEdition/spacing.css", "packages/presets/src/firstEdition/tokens.css" ], "react": [ "packages/react/src/components/spacing/__tests__/spacing.test.tsx", "packages/react/src/components/spacing/index.ts", "packages/react/src/components/spacing/spacing.tsx" ], "vue": [ "packages/vue/src/components/spacing/__tests__/spacing.test.ts", "packages/vue/src/components/spacing/index.ts", "packages/vue/src/components/spacing/spacing.ts" ], "svelte": [ "packages/svelte/src/lib/components/spacing/index.ts", "packages/svelte/src/lib/components/spacing/Spacer.svelte", "packages/svelte/src/lib/components/spacing/Spacing.svelte", "packages/svelte/src/lib/components/spacing/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/spacing/__tests__/spacing-introduction-docs.test.ts", "apps/storybook-react/src/stories/spacing/__tests__/spacing-taxonomy.test.ts", "apps/storybook-react/src/stories/spacing/Introduction.mdx", "apps/storybook-react/src/stories/spacing/spacing.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/spacing/__tests__/spacing-introduction-docs.test.ts", "apps/storybook-vue/src/stories/spacing/__tests__/spacing-taxonomy.test.ts", "apps/storybook-vue/src/stories/spacing/Introduction.mdx", "apps/storybook-vue/src/stories/spacing/spacing.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/spacing/__tests__/spacing-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/spacing/Introduction.mdx", "apps/storybook-svelte/src/stories/spacing/spacing.stories.ts", "apps/storybook-svelte/src/stories/spacing/SpacingShowcase.svelte" ], "contracts": ["tests/contracts/spacing.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "spacing", "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/spacing/spacing.recipe.ts", "packages/core/src/components/atoms/spacing/spacing.types.ts", "packages/presets/src/firstEdition/tokens.css" ], "notes": [ "Spacing is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=spacing and data-size directly from core, while its token scale currently comes from the shared firstEdition tokens.css file rather than a dedicated synced Figma family." ] }, "design": { "componentJsons": [], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [], "nodeReferences": {}, "figmaTokens": [], "figmaStates": { "baseVariants": [], "interactionStates": [] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Spacing is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=spacing and data-size directly from core, while its token scale currently comes from the shared firstEdition tokens.css file rather than a dedicated synced Figma family.", "Generated from docs/registry/families/spacing/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "spinner", "readmePath": "docs/registry/families/spinner/README.md", "metaPath": "docs/registry/families/spinner/registry.meta.json", "generatedPath": "docs/registry/families/spinner/registry.generated.json", "visualPaths": [ "docs/registry/families/spinner/visuals/file-map.mmd", "docs/registry/families/spinner/visuals/interaction-map.mmd", "docs/registry/families/spinner/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "spinner", "displayName": "Spinner", "status": "shipped", "summary": "Family-local loading-indicator family with a core Spinner atom, adapter-owned context wrappers, and button-loading integration built on the same atom contract.", "philosophy": [ "Keep Spinner as a small loading atom that stays decorative by default and only becomes an announced status surface when product code opts in with ariaLabel.", "Keep the seven synced visual styles and size scale source-owned in core so React, Vue, and Svelte render the same spinner geometry and metadata.", "Keep ButtonSpinner and EmptyStateSpinner thin adapter-owned context wrappers rather than turning the core atom into a matrix of loading situations.", "Keep spinner semantics family-local and honest: the atom emits stable local metadata today, but Spinner is not part of the wave-1 central semantic registry." ], "usage": { "useWhen": [ "The UI needs an indeterminate loading indicator for inline button loading, centered empty states, or standalone async feedback.", "The product flow already matches ButtonSpinner or EmptyStateSpinner and benefits from the wrapper defaults for size, visual treatment, and local metadata.", "The team wants React, Vue, and Svelte spinner behavior to stay aligned through one core SVG recipe, one preset CSS contract, and shared adapter contracts." ], "avoidWhen": [ "The experience needs determinate progress, percentage tracking, or skeleton structure rather than an indeterminate spinner.", "The implementation cannot provide nearby loading text or a truthful ariaLabel when the spinner must announce status on its own.", "The team expects the exploratory TinoSpinner animation assets or broader semantic brand/loading taxonomies from Figma to be part of the shipped API today." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for default decorative behavior, seven synced variants, size mapping, and standalone status mode.", "Preset CSS contract tests for light and dark indicator colors, rotation animation wiring, stationary Cross color-shift motion, and the slow-not-stop reduced-motion policy (1600ms).", "Expanded shared spinner contract across React and Vue for decorative default, status mode, inner SVG isolation, token size data-size attributes, and explicit decorative=true.", "Local context-wrapper tests and Storybook introduction/taxonomy tests in both apps." ], "manualReviewRequired": [ "Product-level decisions about when loading is decorative versus when a spinner should expose a standalone accessible status name.", "Real browser and assistive-technology validation for longer loading sequences, repeated status announcements, and button-loading feel.", "Whether the slow-not-stop reduced-motion policy (1600ms) is sufficient for users who need full motion off in real product flows." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Spinner completed a first-pass accessibility audit focused on decorative-vs-status policy, reduced-motion expectations, and contract maturity.", "The family now has expanded shared contract coverage, preset CSS contract tests for reduced-motion slowdown and Cross color-shift behavior, and a dev warning for the decorative={false} without ariaLabel misuse case." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/spinner/Introduction.mdx", "apps/storybook-react/src/stories/spinner/spinner.stories.tsx", "apps/storybook-react/src/stories/spinner/button-spinner.stories.tsx", "apps/storybook-react/src/stories/spinner/empty-state-spinner.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/spinner/Introduction.mdx", "apps/storybook-vue/src/stories/spinner/spinner.stories.ts", "apps/storybook-vue/src/stories/spinner/button-spinner.stories.ts", "apps/storybook-vue/src/stories/spinner/empty-state-spinner.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/spinner/Introduction.mdx", "apps/storybook-svelte/src/stories/spinner/spinner.stories.ts", "apps/storybook-svelte/src/stories/spinner/button-spinner.stories.ts", "apps/storybook-svelte/src/stories/spinner/empty-state-spinner.stories.ts" ] }, "preferredStates": [ "classic", "ring", "dual", "dots-round", "dots-square", "lines", "cross", "xs", "sm", "md", "lg", "button-loading", "empty-state", "light", "dark" ] }, "openQuestions": [ "Which Spinner-family stories should join the first automated accessibility smoke set?", "Should Spinner eventually gain a clearer documented policy for when product teams should pair it with surrounding loading text versus using ariaLabel directly?", "Should the exploratory TinoSpinner size and animation assets remain design-only references, or should any of that surface become a future shipped spinner API?" ] }, "generated": { "family": "spinner", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/spinner-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/spinner/index.ts", "packages/core/src/components/atoms/spinner/spinner-a11y.ts", "packages/core/src/components/atoms/spinner/spinner-recipe.ts", "packages/core/src/components/atoms/spinner/spinner-svg.ts", "packages/core/src/components/atoms/spinner/spinner-types.ts" ], "presets": ["packages/presets/src/firstEdition/spinner.css"], "react": [ "packages/react/src/components/spinner/__tests__/index-exports.test.tsx", "packages/react/src/components/spinner/__tests__/spinner.test.tsx", "packages/react/src/components/spinner/__tests__/variants.test.tsx", "packages/react/src/components/spinner/index.ts", "packages/react/src/components/spinner/spinner.tsx", "packages/react/src/components/spinner/variants.tsx" ], "vue": [ "packages/vue/src/components/spinner/__tests__/index-exports.test.ts", "packages/vue/src/components/spinner/__tests__/spinner.test.ts", "packages/vue/src/components/spinner/__tests__/variants.test.ts", "packages/vue/src/components/spinner/index.ts", "packages/vue/src/components/spinner/spinner.ts", "packages/vue/src/components/spinner/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/spinner/ButtonSpinner.svelte", "packages/svelte/src/lib/components/spinner/EmptyStateSpinner.svelte", "packages/svelte/src/lib/components/spinner/index.ts", "packages/svelte/src/lib/components/spinner/Spinner.svelte", "packages/svelte/src/lib/components/spinner/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/spinner/__tests__/spinner-introduction-docs.test.ts", "apps/storybook-react/src/stories/spinner/__tests__/spinner-taxonomy.test.ts", "apps/storybook-react/src/stories/spinner/button-spinner.stories.tsx", "apps/storybook-react/src/stories/spinner/empty-state-spinner.stories.tsx", "apps/storybook-react/src/stories/spinner/Introduction.mdx", "apps/storybook-react/src/stories/spinner/spinner.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/spinner/__tests__/spinner-introduction-docs.test.ts", "apps/storybook-vue/src/stories/spinner/__tests__/spinner-taxonomy.test.ts", "apps/storybook-vue/src/stories/spinner/button-spinner.stories.ts", "apps/storybook-vue/src/stories/spinner/empty-state-spinner.stories.ts", "apps/storybook-vue/src/stories/spinner/Introduction.mdx", "apps/storybook-vue/src/stories/spinner/spinner.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/spinner/__tests__/spinner-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/spinner/__tests__/spinner-taxonomy.test.ts", "apps/storybook-svelte/src/stories/spinner/button-spinner.stories.ts", "apps/storybook-svelte/src/stories/spinner/ButtonSpinnerStory.svelte", "apps/storybook-svelte/src/stories/spinner/empty-state-spinner.stories.ts", "apps/storybook-svelte/src/stories/spinner/Introduction.mdx", "apps/storybook-svelte/src/stories/spinner/spinner.stories.ts", "apps/storybook-svelte/src/stories/spinner/SpinnerGallery.svelte", "apps/storybook-svelte/src/stories/spinner/SpinnerTreatments.svelte" ], "contracts": ["tests/contracts/spinner.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "spinner", "canonicalAttributes": [], "allowedPurposes": ["button-loading", "empty-state"], "purposeAttributes": { "button-loading": { "data-purpose": "button-loading", "data-context": "button-loading" }, "empty-state": { "data-purpose": "empty-state", "data-context": "empty-state" } }, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/spinner/spinner-recipe.ts", "packages/react/src/components/spinner/variants.tsx", "packages/vue/src/components/spinner/variants.ts" ], "notes": [ "Spinner is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=spinner from core, while context-spinner metadata currently lives in the React and Vue wrappers." ] }, "design": { "componentJsons": [ ".figma/marwes/components/spinnerring.json", ".figma/marwes/components/spinnerclassic.json", ".figma/marwes/components/spinnerdual.json", ".figma/marwes/components/spinnerdots-round.json", ".figma/marwes/components/spinnerdots-square.json", ".figma/marwes/components/spinnerlines.json", ".figma/marwes/components/spinnercross.json", ".figma/marwes/components/newspinner.json", ".figma/marwes/components/spinner-animation.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-spinner/README.md" ], "pageReferences": [ ".figma/marwes/pages/-spinner/component-container_1737-10631.json", ".figma/marwes/pages/-spinner/-spinner_1737-10635.json", ".figma/marwes/pages/-spinner/-spinner-dark_1780-1543.json", ".figma/marwes/pages/-spinner/tinospinner_1766-153.json" ], "nodeReferences": { "spinnerComponentContainer": "1737:10631", "spinnerLightFrame": "1737:10635", "spinnerDarkFrame": "1780:1543", "spinnerRingComponent": "1737:10523", "spinnerClassicComponent": "1737:10526", "spinnerDualComponent": "1737:10538", "spinnerDotsRoundComponent": "1737:10529", "spinnerDotsSquareComponent": "1780:1345", "spinnerLinesComponent": "1780:1343", "spinnerCrossComponent": "1780:1342", "newSpinnerComponentSet": "1766:127", "spinnerAnimationSet": "1767:153", "tinoSpinnerSection": "1766:153" }, "figmaTokens": [], "figmaStates": { "baseVariants": [ "classic", "ring", "dual", "dots-round", "dots-square", "lines", "cross", "button-loading", "empty-state" ], "interactionStates": [ "xs", "sm", "md", "lg", "custom", "light", "dark", "decorative", "status" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Spinner is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=spinner from core, while context-spinner metadata currently lives in the React and Vue wrappers.", "Generated from docs/registry/families/spinner/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "stat-tile", "readmePath": "docs/registry/families/stat-tile/README.md", "metaPath": "docs/registry/families/stat-tile/registry.meta.json", "generatedPath": "docs/registry/families/stat-tile/registry.generated.json", "visualPaths": [ "docs/registry/families/stat-tile/visuals/file-map.mmd", "docs/registry/families/stat-tile/visuals/interaction-map.mmd", "docs/registry/families/stat-tile/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "stat-tile", "displayName": "Stat Tile", "status": "shipped", "summary": "Compact KPI tile synced from the V2 Stat Tile Figma component, with tone treatments, optional trend metadata, and shared React/Vue adapter contracts.", "philosophy": [ "Keep Stat Tile as a focused metric surface rather than a dashboard-grid or charting primitive.", "Keep Figma-owned structure and tone mapping in core/preset contracts so React and Vue render the same tile anatomy.", "Keep number formatting and product-specific metric meaning outside the component API.", "Keep the nested trend part explicit and accessible while making the arrow icon decorative." ], "usage": { "useWhen": [ "The UI needs a compact KPI summary with label, value, optional trend, and optional subtitle.", "The metric fits one of the synced neutral, brand, success, warning, or danger tone treatments.", "React and Vue consumers should receive the same dashboard metric anatomy and metadata." ], "avoidWhen": [ "The experience needs charting, sparklines, expandable analytics, or locale-aware formatting inside the component.", "The tile is only being used as a generic card without metric-specific label/value/trend structure.", "The product needs responsive dashboard layout behavior that should be owned by a layout component." ] }, "axe": { "riskTier": "low", "auditStatus": "first-pass-complete", "automationCovers": [ "Core recipe tests for baseline metadata, tone mapping, positive trend state, and negative trend labels.", "Preset CSS contract tests for Figma baseline dimensions, tone colors, and trend classes.", "Shared React/Vue adapter contract tests for article output, text content, tone metadata, and generated trend labels.", "Storybook introduction/taxonomy tests and a11y smoke coverage in both React and Vue Storybook apps." ], "manualReviewRequired": [ "Visual review against the synced V2 Stat Tile page for tone and spacing fidelity.", "Product-level review for metric wording, number formatting, and trend semantics in real dashboards." ], "roadmapAnchors": [], "notes": [ "The current source is V2 and small; this ships the stable compact tile anatomy without inventing broader analytics patterns." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/stat-tile/Introduction.mdx", "apps/storybook-react/src/stories/stat-tile/stat-tile.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/stat-tile/Introduction.mdx", "apps/storybook-vue/src/stories/stat-tile/stat-tile.stories.ts" ] }, "preferredStates": [ "neutral", "brand", "success", "warning", "danger", "positive", "negative" ] }, "openQuestions": [ "Should a future metrics family add larger dashboard tile compositions or chart/sparkline variants?" ] }, "generated": { "family": "stat-tile", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/stat-tile/index.ts", "packages/core/src/components/atoms/stat-tile/stat-tile-a11y.ts", "packages/core/src/components/atoms/stat-tile/stat-tile-recipe.ts", "packages/core/src/components/atoms/stat-tile/stat-tile-types.ts" ], "presets": ["packages/presets/src/firstEdition/stat-tile.css"], "react": [ "packages/react/src/components/stat-tile/__tests__/index-exports.test.tsx", "packages/react/src/components/stat-tile/__tests__/stat-tile.test.tsx", "packages/react/src/components/stat-tile/index.ts", "packages/react/src/components/stat-tile/stat-tile.tsx" ], "vue": [ "packages/vue/src/components/stat-tile/__tests__/index-exports.test.ts", "packages/vue/src/components/stat-tile/__tests__/stat-tile.test.ts", "packages/vue/src/components/stat-tile/index.ts", "packages/vue/src/components/stat-tile/stat-tile.ts" ], "svelte": [ "packages/svelte/src/lib/components/stat-tile/index.ts", "packages/svelte/src/lib/components/stat-tile/StatTile.svelte", "packages/svelte/src/lib/components/stat-tile/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/stat-tile/__tests__/stat-tile-introduction-docs.test.ts", "apps/storybook-react/src/stories/stat-tile/__tests__/stat-tile-taxonomy.test.ts", "apps/storybook-react/src/stories/stat-tile/Introduction.mdx", "apps/storybook-react/src/stories/stat-tile/stat-tile.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/stat-tile/__tests__/stat-tile-introduction-docs.test.ts", "apps/storybook-vue/src/stories/stat-tile/__tests__/stat-tile-taxonomy.test.ts", "apps/storybook-vue/src/stories/stat-tile/Introduction.mdx", "apps/storybook-vue/src/stories/stat-tile/stat-tile.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/stat-tile/__tests__/stat-tile-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/stat-tile/__tests__/stat-tile-taxonomy.test.ts", "apps/storybook-svelte/src/stories/stat-tile/Introduction.mdx", "apps/storybook-svelte/src/stories/stat-tile/stat-tile.stories.ts", "apps/storybook-svelte/src/stories/stat-tile/StatTileToneMatrix.svelte" ], "contracts": ["tests/contracts/stat-tile.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": "stat-tile", "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/stat-tile/stat-tile-recipe.ts" ], "notes": [ "Stat Tile is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=stat-tile plus local tone and trend attributes from core." ] }, "design": { "componentJsons": [ ".figma/marwes/components/stat-tile.json", ".figma/marwes/components/partsstat-tiletrend.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-stat-tile/README.md" ], "pageReferences": [ ".figma/marwes/pages/-stat-tile/-badge_3008-4750.json", ".figma/marwes/pages/-stat-tile/-badge-dark_3008-4890.json" ], "nodeReferences": { "statTileComponent": "1411:6857", "statTileTrendComponentSet": "2695:25437" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["neutral", "brand", "success", "warning", "danger"], "interactionStates": ["positive", "negative", "label", "value", "subtitle", "trend"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Stat Tile is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=stat-tile plus local tone and trend attributes from core.", "Generated from docs/registry/families/stat-tile/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "switch", "readmePath": "docs/registry/families/switch/README.md", "metaPath": "docs/registry/families/switch/registry.meta.json", "generatedPath": "docs/registry/families/switch/registry.generated.json", "visualPaths": [ "docs/registry/families/switch/visuals/file-map.mmd", "docs/registry/families/switch/visuals/interaction-map.mmd", "docs/registry/families/switch/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "switch", "displayName": "Switch", "status": "shipped", "summary": "Binary toggle family with a button-backed switch atom, a canonical SwitchField path, and thin purpose-switch wrappers.", "philosophy": [ "Teach SwitchField as the canonical labeled toggle surface and keep raw Switch as the low-level escape hatch.", "Keep checked-state semantics in core and field wiring in shared helpers so React and Vue stay aligned.", "Treat the button-backed role=switch model as an explicit family choice rather than an incidental implementation detail.", "Keep purpose-switch wrappers thin and semantic so they add meaning without becoming a second switch implementation." ], "usage": { "useWhen": [ "The UI needs a binary on/off control with visible labeling and optional description or error support.", "The product flow maps clearly to FeatureToggle, PreferenceSwitch, or PermissionSwitch and benefits from self-documenting purpose metadata.", "The team wants React and Vue switch behavior to stay aligned through shared core helpers and one contract file." ], "avoidWhen": [ "A different control such as checkbox, radio, or tabs is the more honest interaction model.", "The implementation only needs visual styling and cannot own naming or described-by wiring for a raw custom layout.", "The team expects switch error handling to behave like text-input invalid semantics rather than described-by support." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared switch contract coverage across React and Vue for checked state, disabled behavior, visible-label wiring, description wiring, and error wiring.", "Local atom tests for direct raw-switch naming and size-class behavior in both adapters.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for checked-state announcements, focus visibility, and toggle feel.", "Future decisions about which switch stories should join stricter automated accessibility gates.", "Direct raw aria-labelledby usage if the family wants dedicated local proof beyond the current shared-contract surface." ], "roadmapAnchors": [ "AXE_ROADMAP.md#p1--first-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "notes": [ "Switch completed a first-pass audit and now has an explicit spec-backed family contract.", "The family still sits outside the wave-1 central semantic registry even though purpose wrappers already emit useful metadata." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/switch/Introduction.mdx", "apps/storybook-react/src/stories/switch/switch-field.stories.tsx", "apps/storybook-react/src/stories/switch/switch.stories.tsx", "apps/storybook-react/src/stories/switch/feature-toggle.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/switch/Introduction.mdx", "apps/storybook-vue/src/stories/switch/switch-field.stories.ts", "apps/storybook-vue/src/stories/switch/switch.stories.ts", "apps/storybook-vue/src/stories/switch/feature-toggle.stories.ts" ] }, "preferredStates": [ "off", "on", "default", "hover", "pressed", "disabled", "focus", "compact", "wide", "rich" ] }, "openQuestions": [ "Which Switch-family stories should later join automated accessibility gates?", "Should direct raw aria-labelledby usage be added to package-level tests, or remain documented without dedicated local assertions?" ] }, "generated": { "family": "switch", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/switch-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#p1--first-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "core": [ "packages/core/src/components/atoms/switch/index.ts", "packages/core/src/components/atoms/switch/switch-a11y.ts", "packages/core/src/components/atoms/switch/switch-recipe.ts", "packages/core/src/components/atoms/switch/switch-types.ts" ], "presets": [ "packages/presets/src/firstEdition/switch.css", "packages/presets/src/firstEdition/molecules/switch-field.css" ], "react": [ "packages/react/src/components/switch/__tests__/switch.test.tsx", "packages/react/src/components/switch/__tests__/variants.test.tsx", "packages/react/src/components/switch/index.ts", "packages/react/src/components/switch/switch-field.tsx", "packages/react/src/components/switch/switch.tsx", "packages/react/src/components/switch/variants.tsx" ], "vue": [ "packages/vue/src/components/switch/__tests__/switch.test.ts", "packages/vue/src/components/switch/__tests__/variants.test.ts", "packages/vue/src/components/switch/index.ts", "packages/vue/src/components/switch/switch-field.ts", "packages/vue/src/components/switch/switch.ts", "packages/vue/src/components/switch/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/switch/FeatureToggle.svelte", "packages/svelte/src/lib/components/switch/index.ts", "packages/svelte/src/lib/components/switch/PermissionSwitch.svelte", "packages/svelte/src/lib/components/switch/PreferenceSwitch.svelte", "packages/svelte/src/lib/components/switch/Switch.svelte", "packages/svelte/src/lib/components/switch/SwitchField.svelte", "packages/svelte/src/lib/components/switch/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/switch/__tests__/switch-introduction-docs.test.ts", "apps/storybook-react/src/stories/switch/__tests__/switch-taxonomy.test.ts", "apps/storybook-react/src/stories/switch/feature-toggle.stories.tsx", "apps/storybook-react/src/stories/switch/Introduction.mdx", "apps/storybook-react/src/stories/switch/permission-switch.stories.tsx", "apps/storybook-react/src/stories/switch/preference-switch.stories.tsx", "apps/storybook-react/src/stories/switch/story-helpers.tsx", "apps/storybook-react/src/stories/switch/switch-field.stories.tsx", "apps/storybook-react/src/stories/switch/switch.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/switch/__tests__/switch-introduction-docs.test.ts", "apps/storybook-vue/src/stories/switch/__tests__/switch-taxonomy.test.ts", "apps/storybook-vue/src/stories/switch/feature-toggle.stories.ts", "apps/storybook-vue/src/stories/switch/Introduction.mdx", "apps/storybook-vue/src/stories/switch/permission-switch.stories.ts", "apps/storybook-vue/src/stories/switch/preference-switch.stories.ts", "apps/storybook-vue/src/stories/switch/story-helpers.ts", "apps/storybook-vue/src/stories/switch/switch-field.stories.ts", "apps/storybook-vue/src/stories/switch/switch.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/switch/__tests__/switch-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/switch/__tests__/switch-taxonomy.test.ts", "apps/storybook-svelte/src/stories/switch/feature-toggle.stories.ts", "apps/storybook-svelte/src/stories/switch/Introduction.mdx", "apps/storybook-svelte/src/stories/switch/permission-switch.stories.ts", "apps/storybook-svelte/src/stories/switch/preference-switch.stories.ts", "apps/storybook-svelte/src/stories/switch/switch-field.stories.ts", "apps/storybook-svelte/src/stories/switch/switch.stories.ts", "apps/storybook-svelte/src/stories/switch/SwitchShowcase.svelte" ], "contracts": ["tests/contracts/switch.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": ["feature-toggle", "preference", "permission"], "purposeAttributes": { "feature-toggle": { "data-purpose": "feature-toggle" }, "preference": { "data-purpose": "preference" }, "permission": { "data-purpose": "permission" } }, "sourceOfTruthPaths": [ "packages/react/src/components/switch/variants.tsx", "packages/vue/src/components/switch/variants.ts" ], "notes": [ "Switch is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Purpose metadata currently lives in the React and Vue purpose-switch wrappers rather than the central semantic registry." ] }, "design": { "componentJsons": [".figma/marwes/components/switch.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-switch/README.md" ], "pageReferences": [ ".figma/marwes/pages/-switch/-switch_1364-11442.json", ".figma/marwes/pages/-switch/-switch-dark_1369-4001.json", ".figma/marwes/pages/-switch/component-container_1371-12852.json" ], "nodeReferences": { "switchComponentSet": "1371:12723", "switchLightFrame": "1364:11442", "switchDarkFrame": "1369:4001", "switchComponentContainer": "1371:12852" }, "figmaTokens": [ "switch/track-on", "switch/thumb-on", "switch/track-off", "switch/thumb-off", "switch/label" ], "figmaStates": { "baseVariants": [ "switch", "switch-field", "feature-toggle", "preference", "permission" ], "interactionStates": [ "off", "on", "default", "hover", "pressed", "disabled", "focus", "compact", "wide", "rich" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Switch is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Purpose metadata currently lives in the React and Vue purpose-switch wrappers rather than the central semantic registry.", "Generated from docs/registry/families/switch/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "tab", "readmePath": "docs/registry/families/tab/README.md", "metaPath": "docs/registry/families/tab/registry.meta.json", "generatedPath": "docs/registry/families/tab/registry.generated.json", "visualPaths": [ "docs/registry/families/tab/visuals/file-map.mmd", "docs/registry/families/tab/visuals/interaction-map.mmd", "docs/registry/families/tab/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "tab", "displayName": "Tab", "status": "shipped", "summary": "Coordinated tabs family with a low-level tab atom, a canonical TabGroup path, and thin purpose-tab wrappers.", "philosophy": [ "Teach TabGroup as the canonical coordinated widget surface and keep raw Tab as the low-level escape hatch.", "Keep id generation, fallback resolution, and keyboard movement logic in core so React and Vue stay aligned.", "Treat automatic activation and disabled-tab skipping as intentional family decisions rather than incidental implementation details.", "Keep purpose-tab wrappers thin and semantic so they add meaning without becoming a second tabs implementation." ], "usage": { "useWhen": [ "The UI needs a named tablist with built-in keyboard movement and tab-to-panel wiring.", "The product flow maps clearly to NavigationTabs, ContentTabs, or SettingsTabs and benefits from self-documenting purpose metadata.", "The team wants React and Vue tabs behavior to stay aligned through shared core helpers and one contract file." ], "avoidWhen": [ "A different navigation or disclosure pattern such as accordion, switch, or plain links is the more honest interaction model.", "The implementation cannot own the tabpanel relationship and only needs a visual segmented control treatment.", "The team expects advanced features such as vertical orientation, lazy panel mounting, or overflow management that this family does not currently define." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared tab contract coverage across React and Vue for tablist naming, panel wiring, keyboard movement, disabled-tab skipping, and controlled/uncontrolled behavior.", "Local atom tests for icon-only naming and disabled-tab semantics in both adapters.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for keyboard feel, focus visibility, and tabpanel reading flow.", "Policy clarification for the no-enabled-tabs edge case if the family should define it explicitly later.", "Any future expansion beyond the current horizontal automatic-activation tabs model." ], "roadmapAnchors": [ "AXE_ROADMAP.md#p1--first-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "notes": [ "Tabs completed a first-pass audit and now have an explicit spec-backed family contract.", "The family still sits outside the wave-1 central semantic registry even though purpose wrappers already emit useful metadata." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/tab/Introduction.mdx", "apps/storybook-react/src/stories/tab/tab-group.stories.tsx", "apps/storybook-react/src/stories/tab/tab.stories.tsx", "apps/storybook-react/src/stories/tab/navigation-tabs.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/tab/Introduction.mdx", "apps/storybook-vue/src/stories/tab/tab-group.stories.ts", "apps/storybook-vue/src/stories/tab/tab.stories.ts", "apps/storybook-vue/src/stories/tab/navigation-tabs.stories.ts" ] }, "preferredStates": ["default", "selected", "hover", "pressed", "disabled", "focus"] }, "openQuestions": [ "Should purpose-tab metadata eventually move into the central semantic registry if tabs become a covered semantic family?", "Should the no-enabled-tabs edge case be explicitly specified and covered by the shared contract, or remain outside the supported family contract?" ] }, "generated": { "family": "tab", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/tab-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#p1--first-component-audit-queue", "AXE_ROADMAP.md#pr-4--new-shared-contracts-for-tabs-switch-accordion-tooltip-slider" ], "core": [ "packages/core/src/components/atoms/tab/index.ts", "packages/core/src/components/atoms/tab/tab-a11y.ts", "packages/core/src/components/atoms/tab/tab-group-a11y.ts", "packages/core/src/components/atoms/tab/tab-group-types.ts", "packages/core/src/components/atoms/tab/tab-recipe.ts", "packages/core/src/components/atoms/tab/tab-types.ts" ], "presets": [ "packages/presets/src/firstEdition/tab.css", "packages/presets/src/firstEdition/molecules/tab-group.css" ], "react": [ "packages/react/src/components/tab/__tests__/tab-group.test.tsx", "packages/react/src/components/tab/__tests__/tab.test.tsx", "packages/react/src/components/tab/__tests__/variants.test.tsx", "packages/react/src/components/tab/index.ts", "packages/react/src/components/tab/tab-group.tsx", "packages/react/src/components/tab/tab.tsx", "packages/react/src/components/tab/variants.tsx" ], "vue": [ "packages/vue/src/components/tab/__tests__/tab-group.test.ts", "packages/vue/src/components/tab/__tests__/tab.test.ts", "packages/vue/src/components/tab/__tests__/variants.test.ts", "packages/vue/src/components/tab/index.ts", "packages/vue/src/components/tab/tab-group.ts", "packages/vue/src/components/tab/tab.ts", "packages/vue/src/components/tab/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/tab/ContentTabs.svelte", "packages/svelte/src/lib/components/tab/index.ts", "packages/svelte/src/lib/components/tab/NavigationTabs.svelte", "packages/svelte/src/lib/components/tab/SettingsTabs.svelte", "packages/svelte/src/lib/components/tab/Tab.svelte", "packages/svelte/src/lib/components/tab/TabGroup.svelte", "packages/svelte/src/lib/components/tab/TabPanel.svelte", "packages/svelte/src/lib/components/tab/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/tab/__tests__/tab-introduction-docs.test.ts", "apps/storybook-react/src/stories/tab/__tests__/tab-taxonomy.test.ts", "apps/storybook-react/src/stories/tab/content-tabs.stories.tsx", "apps/storybook-react/src/stories/tab/Introduction.mdx", "apps/storybook-react/src/stories/tab/navigation-tabs.stories.tsx", "apps/storybook-react/src/stories/tab/settings-tabs.stories.tsx", "apps/storybook-react/src/stories/tab/tab-group.stories.tsx", "apps/storybook-react/src/stories/tab/tab.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/tab/__tests__/tab-introduction-docs.test.ts", "apps/storybook-vue/src/stories/tab/__tests__/tab-taxonomy.test.ts", "apps/storybook-vue/src/stories/tab/content-tabs.stories.ts", "apps/storybook-vue/src/stories/tab/Introduction.mdx", "apps/storybook-vue/src/stories/tab/navigation-tabs.stories.ts", "apps/storybook-vue/src/stories/tab/settings-tabs.stories.ts", "apps/storybook-vue/src/stories/tab/tab-group.stories.ts", "apps/storybook-vue/src/stories/tab/tab.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/tab/__tests__/tab-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/tab/__tests__/tab-taxonomy.test.ts", "apps/storybook-svelte/src/stories/tab/content-tabs.stories.ts", "apps/storybook-svelte/src/stories/tab/Introduction.mdx", "apps/storybook-svelte/src/stories/tab/navigation-tabs.stories.ts", "apps/storybook-svelte/src/stories/tab/settings-tabs.stories.ts", "apps/storybook-svelte/src/stories/tab/tab-group.stories.ts", "apps/storybook-svelte/src/stories/tab/tab.stories.ts", "apps/storybook-svelte/src/stories/tab/TabAtomPreview.svelte", "apps/storybook-svelte/src/stories/tab/TabShowcase.svelte" ], "contracts": ["tests/contracts/tab.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": ["navigation-tabs", "content-tabs", "settings-tabs"], "purposeAttributes": { "navigation-tabs": { "data-purpose": "navigation-tabs" }, "content-tabs": { "data-purpose": "content-tabs" }, "settings-tabs": { "data-purpose": "settings-tabs" } }, "sourceOfTruthPaths": [ "packages/react/src/components/tab/variants.tsx", "packages/vue/src/components/tab/variants.ts" ], "notes": [ "Tabs are not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Purpose metadata currently lives in the React and Vue purpose-tab wrappers rather than the central semantic registry." ] }, "design": { "componentJsons": [ ".figma/marwes/components/tab.json", ".figma/marwes/components/tab-group.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-tab/README.md" ], "pageReferences": [ ".figma/marwes/pages/-tab/-tab_1364-11703.json", ".figma/marwes/pages/-tab/-tab-dark_1368-6067.json", ".figma/marwes/pages/-tab/component-container_1574-21105.json", ".figma/marwes/pages/-tab/tab-bar_1896-33125.json" ], "nodeReferences": { "tabComponent": "1364:7729", "tabGroupComponent": "1737:9904", "tabLightFrame": "1364:11703", "tabDarkFrame": "1368:6067", "tabBarFrame": "1896:33125" }, "figmaTokens": ["tab/surface", "tab/label", "tab/indicator"], "figmaStates": { "baseVariants": [ "tab", "tab-group", "navigation-tabs", "content-tabs", "settings-tabs" ], "interactionStates": ["default", "selected", "hover", "pressed", "disabled", "focus"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Tabs are not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "Purpose metadata currently lives in the React and Vue purpose-tab wrappers rather than the central semantic registry.", "Generated from docs/registry/families/tab/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "text", "readmePath": "docs/registry/families/text/README.md", "metaPath": "docs/registry/families/text/registry.meta.json", "generatedPath": "docs/registry/families/text/registry.generated.json", "visualPaths": [ "docs/registry/families/text/visuals/file-map.mmd", "docs/registry/families/text/visuals/interaction-map.mmd", "docs/registry/families/text/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "text", "displayName": "Text", "status": "shipped", "summary": "Non-heading typography atom for labels, captions, overline, microcopy, and supporting body text where consumers choose the native element.", "philosophy": [ "Keep Text as the smallest typography primitive for labels and support copy, not a replacement for Heading or Paragraph.", "Keep semantic element choice explicit through the as prop so product code owns inline versus block meaning.", "Use the shared typography preset and theme text variants as the runtime source of truth." ], "usage": { "useWhen": [ "The UI needs label, caption, overline, microcopy, or compact supporting text.", "The caller needs to choose span, p, or div while reusing Marwes typography variants.", "React, Vue, and Svelte consumers need the same typography class and native-element contract." ], "avoidWhen": [ "The text creates page or section hierarchy; use Heading.", "The text is long-form body copy; use Paragraph.", "The text is part of an input state that should use the field component's built-in label, helper, or error slots." ] }, "axe": { "riskTier": "low", "auditStatus": "queued", "automationCovers": [ "Shared Text contract tests for default tag, variant classes, as prop, and id passthrough.", "Adapter tests and Storybook introduction/taxonomy tests across React, Vue, and Svelte." ], "manualReviewRequired": [ "Typography visual review against current dashboard and typography-adjacent Figma refs.", "Product-level review that Text is not used to fake heading hierarchy or long-form paragraph structure." ], "roadmapAnchors": [], "notes": [ "Text is intentionally family-local and native-first; it does not emit data-component metadata today." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/text/Introduction.mdx", "apps/storybook-react/src/stories/text/text.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/text/Introduction.mdx", "apps/storybook-vue/src/stories/text/text.stories.ts" ], "svelte": [ "apps/storybook-svelte/src/stories/text/Introduction.mdx", "apps/storybook-svelte/src/stories/text/text.stories.ts" ] }, "preferredStates": [ "label", "caption", "overline", "micro", "body", "span", "p", "div", "light", "dark" ] }, "openQuestions": [ "Should Text eventually emit family-local data attributes, or should it remain purely native typography?", "Should the typography Figma source gain a dedicated Text component set to separate it from input-field text refs?" ] }, "generated": { "family": "text", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md"], "roadmap": [], "core": [ "packages/core/src/components/atoms/text/index.ts", "packages/core/src/components/atoms/text/text-recipe.ts", "packages/core/src/components/atoms/text/text-types.ts" ], "presets": ["packages/presets/src/firstEdition/typography.css"], "react": [ "packages/react/src/components/text/__tests__/text.test.tsx", "packages/react/src/components/text/index.ts", "packages/react/src/components/text/text.tsx" ], "vue": [ "packages/vue/src/components/text/__tests__/text.test.ts", "packages/vue/src/components/text/index.ts", "packages/vue/src/components/text/text.ts" ], "svelte": [ "packages/svelte/src/lib/components/text/index.ts", "packages/svelte/src/lib/components/text/Text.svelte", "packages/svelte/src/lib/components/text/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/text/__tests__/text-introduction-docs.test.ts", "apps/storybook-react/src/stories/text/__tests__/text-taxonomy.test.ts", "apps/storybook-react/src/stories/text/Introduction.mdx", "apps/storybook-react/src/stories/text/text.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/text/__tests__/text-introduction-docs.test.ts", "apps/storybook-vue/src/stories/text/__tests__/text-taxonomy.test.ts", "apps/storybook-vue/src/stories/text/Introduction.mdx", "apps/storybook-vue/src/stories/text/text.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/text/__tests__/text-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/text/Introduction.mdx", "apps/storybook-svelte/src/stories/text/text.stories.ts", "apps/storybook-svelte/src/stories/text/TextShowcase.svelte" ], "contracts": ["tests/contracts/text.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/text/text-recipe.ts", "packages/core/src/components/atoms/text/text-types.ts", "packages/core/src/theme/text-variant.ts" ], "notes": [ "Text is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits typography classes and native inline/block text elements without adding Marwes data-component metadata." ] }, "design": { "componentJsons": [], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md" ], "pageReferences": [ ".figma/marwes/pages/------playground---dashboard/text_2832-29644.json", ".figma/marwes/pages/------playground---dashboard/row-1-typography-text-inputs_2832-29277.json", ".figma/marwes/pages/-dashboard-teaser/text-box_3088-24118.json" ], "nodeReferences": { "dashboardTextFrame": "2832:29644", "typographyInputsRow": "2832:29277", "dashboardTeaserTextBox": "3088:24118" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["label", "caption", "overline", "micro", "body"], "interactionStates": ["span", "p", "div", "light", "dark"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": false, "figmaReferencesPresent": true }, "notes": [ "Text is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits typography classes and native inline/block text elements without adding Marwes data-component metadata.", "Generated from docs/registry/families/text/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "toast", "readmePath": "docs/registry/families/toast/README.md", "metaPath": "docs/registry/families/toast/registry.meta.json", "generatedPath": "docs/registry/families/toast/registry.generated.json", "visualPaths": [ "docs/registry/families/toast/visuals/file-map.mmd", "docs/registry/families/toast/visuals/interaction-map.mmd", "docs/registry/families/toast/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "toast", "displayName": "Toast", "status": "shipped", "summary": "Canonical transient-feedback family with a raw Toast atom, adapter-owned delivery layers, and thin purpose-toast wrappers for common message intent.", "philosophy": [ "Teach purpose toasts first when the message intent is known and keep raw Toast as the deliberate primitive and escape hatch.", "Keep canonical toast semantics in core so React and Vue emit the same data-component, data-purpose, and data-intent contract.", "Treat ToastContainer, ToastProvider, and useToast as adapter-owned delivery layers rather than pretending the atom owns queue behavior.", "Keep toast-local actions as lightweight underlined text actions, with real buttons or links when the action is interactive.", "Keep neutral and brand primitives explicit but secondary so they do not blur the canonical purpose-toast vocabulary." ], "usage": { "useWhen": [ "The UI needs transient, non-blocking feedback with a clear semantic intent such as success, error, warning, or info.", "The product flow benefits from ToastContainer or ToastProvider for stacked placement and queue management.", "The team wants React and Vue toast semantics to stay aligned through the central semantic registry and one shared contract file." ], "avoidWhen": [ "The message is blocking, requires user decision-making, or should really be a dialog rather than a toast.", "The implementation cannot provide appropriate live-region urgency or sane dismissal timing for the message severity.", "The team expects a richer notification center or persistent inbox pattern that goes beyond the current toast family scope." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared React and Vue toast contract coverage for raw toast semantics, purpose-toast defaults, max-visible trimming, primitive intent forwarding, dismiss forwarding, and provider-managed delivery timing.", "Local container and provider tests in both adapters for placement, imperative queue flow, and adapter-specific wiring details.", "Storybook introduction and taxonomy tests in both apps with explicit timing and inline-action guidance." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for repeated toast announcement timing, interruption feel, and urgency calibration.", "Product-level judgment about when the default 4000ms duration is sufficient versus when critical or actionable toasts should stay visible with duration null or a longer explicit timeout.", "Any future expansion beyond the current transient feedback and simple queue model." ], "roadmapAnchors": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "notes": [ "Toast completed a first-pass accessibility audit focused on live-region defaults, delivery timing, dismissal behavior, and contract maturity.", "The family now has shared contract coverage for the raw atom, purpose wrappers, and delivery-layer timing behavior across React and Vue." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/toast/Introduction.mdx", "apps/storybook-react/src/stories/toast/toast-matrix.stories.tsx", "apps/storybook-react/src/stories/toast/toast-container.stories.tsx", "apps/storybook-react/src/stories/toast/error-toast.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/toast/Introduction.mdx", "apps/storybook-vue/src/stories/toast/toast-matrix.stories.ts", "apps/storybook-vue/src/stories/toast/toast-container.stories.ts", "apps/storybook-vue/src/stories/toast/error-toast.stories.ts" ] }, "preferredStates": [ "subtle", "outline", "rich", "neutral", "info", "success", "warning", "error", "brand", "light", "dark" ] }, "openQuestions": [ "Which Toast-family stories should join the first automated accessibility smoke set?", "Should the provider default stay at 4000ms long term, or move toward a longer or intent-aware timeout policy once the canonical accessibility support model exists?", "Should neutral and brand raw-toast primitives remain escape hatches only, or eventually gain a more explicit documented governance boundary?" ] }, "generated": { "family": "toast", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/toast-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#phase-5--add-a-first-class-accessibility-support-model", "AXE_ROADMAP.md#p3--follow-up-family-and-system-work" ], "core": [ "packages/core/src/components/atoms/toast/index.ts", "packages/core/src/components/atoms/toast/toast-a11y.ts", "packages/core/src/components/atoms/toast/toast-container-types.ts", "packages/core/src/components/atoms/toast/toast-recipe.ts", "packages/core/src/components/atoms/toast/toast-types.ts" ], "presets": [ "packages/presets/src/firstEdition/toast.css", "packages/presets/src/firstEdition/molecules/toast-container.css" ], "react": [ "packages/react/src/components/toast/__tests__/toast-container.test.tsx", "packages/react/src/components/toast/__tests__/variants.test.tsx", "packages/react/src/components/toast/index.ts", "packages/react/src/components/toast/toast-container.tsx", "packages/react/src/components/toast/toast-manager-types.ts", "packages/react/src/components/toast/toast-provider.tsx", "packages/react/src/components/toast/toast.tsx", "packages/react/src/components/toast/variants.tsx" ], "vue": [ "packages/vue/src/components/toast/__tests__/toast-container.test.ts", "packages/vue/src/components/toast/__tests__/variants.test.ts", "packages/vue/src/components/toast/index.ts", "packages/vue/src/components/toast/toast-container.ts", "packages/vue/src/components/toast/toast-manager-types.ts", "packages/vue/src/components/toast/toast-provider.ts", "packages/vue/src/components/toast/toast.ts", "packages/vue/src/components/toast/variants.ts" ], "svelte": [ "packages/svelte/src/lib/components/toast/ErrorToast.svelte", "packages/svelte/src/lib/components/toast/index.ts", "packages/svelte/src/lib/components/toast/InfoToast.svelte", "packages/svelte/src/lib/components/toast/SuccessToast.svelte", "packages/svelte/src/lib/components/toast/Toast.svelte", "packages/svelte/src/lib/components/toast/ToastContainer.svelte", "packages/svelte/src/lib/components/toast/ToastProvider.svelte", "packages/svelte/src/lib/components/toast/types.ts", "packages/svelte/src/lib/components/toast/WarningToast.svelte" ], "storybookReact": [ "apps/storybook-react/src/stories/toast/__tests__/toast-introduction-docs.test.ts", "apps/storybook-react/src/stories/toast/__tests__/toast-taxonomy.test.ts", "apps/storybook-react/src/stories/toast/error-toast.stories.tsx", "apps/storybook-react/src/stories/toast/info-toast.stories.tsx", "apps/storybook-react/src/stories/toast/Introduction.mdx", "apps/storybook-react/src/stories/toast/success-toast.stories.tsx", "apps/storybook-react/src/stories/toast/toast-container.stories.tsx", "apps/storybook-react/src/stories/toast/toast-matrix.stories.tsx", "apps/storybook-react/src/stories/toast/toast.stories.tsx", "apps/storybook-react/src/stories/toast/warning-toast.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/toast/__tests__/toast-introduction-docs.test.ts", "apps/storybook-vue/src/stories/toast/__tests__/toast-taxonomy.test.ts", "apps/storybook-vue/src/stories/toast/error-toast.stories.ts", "apps/storybook-vue/src/stories/toast/info-toast.stories.ts", "apps/storybook-vue/src/stories/toast/Introduction.mdx", "apps/storybook-vue/src/stories/toast/success-toast.stories.ts", "apps/storybook-vue/src/stories/toast/toast-container.stories.ts", "apps/storybook-vue/src/stories/toast/toast-matrix.stories.css", "apps/storybook-vue/src/stories/toast/toast-matrix.stories.ts", "apps/storybook-vue/src/stories/toast/toast.stories.ts", "apps/storybook-vue/src/stories/toast/warning-toast.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/toast/__tests__/toast-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/toast/__tests__/toast-taxonomy.test.ts", "apps/storybook-svelte/src/stories/toast/error-toast.stories.ts", "apps/storybook-svelte/src/stories/toast/info-toast.stories.ts", "apps/storybook-svelte/src/stories/toast/Introduction.mdx", "apps/storybook-svelte/src/stories/toast/success-toast.stories.ts", "apps/storybook-svelte/src/stories/toast/toast-container.stories.ts", "apps/storybook-svelte/src/stories/toast/toast-matrix.stories.ts", "apps/storybook-svelte/src/stories/toast/toast.stories.ts", "apps/storybook-svelte/src/stories/toast/ToastContainerStory.svelte", "apps/storybook-svelte/src/stories/toast/ToastDemo.svelte", "apps/storybook-svelte/src/stories/toast/ToastDemoButtons.svelte", "apps/storybook-svelte/src/stories/toast/ToastMatrix.svelte", "apps/storybook-svelte/src/stories/toast/ToastShowcase.svelte", "apps/storybook-svelte/src/stories/toast/warning-toast.stories.ts" ], "contracts": ["tests/contracts/toast.contract.ts"] }, "semantics": { "coverageLevel": "canonical", "dataComponent": "toast", "canonicalAttributes": ["data-component", "data-variant", "data-intent"], "allowedPurposes": ["success-toast", "error-toast", "warning-toast", "info-toast"], "purposeAttributes": { "error-toast": { "data-purpose": "error-toast", "data-intent": "error" }, "info-toast": { "data-purpose": "info-toast", "data-intent": "info" }, "success-toast": { "data-purpose": "success-toast", "data-intent": "success" }, "warning-toast": { "data-purpose": "warning-toast", "data-intent": "warning" } }, "sourceOfTruthPaths": [ "packages/core/src/semantics/family-semantics.ts", "packages/core/src/semantics/purpose-semantics.ts" ], "notes": [ "Toast keeps canonical family identity in core while delivery timing and queue orchestration stay adapter-owned." ] }, "design": { "componentJsons": [".figma/marwes/components/toast.json"], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-toast/README.md" ], "pageReferences": [ ".figma/marwes/pages/-toast/-toast-light_1365-12526.json", ".figma/marwes/pages/-toast/-toast-dark_2970-9564.json" ], "nodeReferences": { "toastComponentSet": "1365:11937", "toastLightFrame": "1365:12526", "toastDarkFrame": "2970:9564" }, "figmaTokens": [ "status-display/subtle/surface", "status-display/subtle/border", "status-display/subtle/text", "status-display/outline/surface", "status-display/outline/border", "status-display/outline/text", "status-display/rich/surface", "status-display/rich/border", "status-display/rich/text" ], "figmaStates": { "baseVariants": [ "subtle", "outline", "rich", "neutral", "info", "success", "warning", "error", "brand" ], "interactionStates": ["light", "dark", "semantic", "primitives"] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Toast keeps canonical family identity in core while delivery timing and queue orchestration stay adapter-owned.", "Generated from docs/registry/families/toast/registry.meta.json and scripts/generate-component-registry.ts." ] } }, { "family": "tooltip", "readmePath": "docs/registry/families/tooltip/README.md", "metaPath": "docs/registry/families/tooltip/registry.meta.json", "generatedPath": "docs/registry/families/tooltip/registry.generated.json", "visualPaths": [ "docs/registry/families/tooltip/visuals/file-map.mmd", "docs/registry/families/tooltip/visuals/interaction-map.mmd", "docs/registry/families/tooltip/visuals/layer-map.mmd" ], "previewPaths": [], "meta": { "family": "tooltip", "displayName": "Tooltip", "status": "shipped", "summary": "Contextual-help family with a standalone tooltip atom, a canonical TooltipGroup path, and an explicit non-interactive scope boundary.", "philosophy": [ "Teach TooltipGroup as the canonical contextual-help surface and keep raw Tooltip as the low-level visible bubble primitive.", "Keep tooltip content non-interactive so the family does not drift into popover or dialog territory.", "Treat trigger naming, reveal, and dismissal behavior as release-sensitive contract surface rather than incidental adapter details.", "Stay honest about semantic maturity: the family emits useful local metadata today, but it is not part of the wave-1 central semantic registry." ], "usage": { "useWhen": [ "The UI needs short, non-interactive contextual help tied to an icon trigger or a placement-owned tooltip bubble.", "The product flow benefits from TooltipGroup's built-in trigger naming and hover or focus reveal behavior.", "The team wants React and Vue tooltip behavior to stay aligned through one shared contract file." ], "avoidWhen": [ "The content needs links, buttons, forms, or any other focusable interactive elements.", "The UI really needs a popover, dialog, or other richer overlay rather than short contextual help.", "The team expects collision detection, delay tuning, or a general-purpose overlay API that this family does not define." ] }, "axe": { "riskTier": "medium", "auditStatus": "first-pass-complete", "automationCovers": [ "Shared tooltip contract coverage across React and Vue for trigger naming, hover or focus reveal, dismissal, described-by wiring, and controlled open-state behavior.", "Local tooltip atom and index-export tests in both adapters.", "Storybook introduction and taxonomy tests in both apps." ], "manualReviewRequired": [ "Real browser and assistive-technology validation for tooltip announcement timing and keyboard feel.", "Future decisions about which tooltip stories should join stricter automated accessibility gates.", "Whether clearly interactive tooltip content should eventually trigger dev-time warnings." ], "roadmapAnchors": [ "AXE_ROADMAP.md#p2--second-component-audit-queue", "AXE_ROADMAP.md#4d--tooltip-scope-discipline" ], "notes": [ "Tooltip completed a first-pass audit and now has an explicit spec-backed family contract.", "The family still sits outside the wave-1 central semantic registry even though the atom and group already emit stable local metadata." ] }, "visuals": { "canonicalStories": { "react": [ "apps/storybook-react/src/stories/tooltip/Introduction.mdx", "apps/storybook-react/src/stories/tooltip/tooltip-group.stories.tsx", "apps/storybook-react/src/stories/tooltip/tooltip.stories.tsx" ], "vue": [ "apps/storybook-vue/src/stories/tooltip/Introduction.mdx", "apps/storybook-vue/src/stories/tooltip/tooltip-group.stories.ts", "apps/storybook-vue/src/stories/tooltip/tooltip.stories.ts" ] }, "preferredStates": ["open", "closed", "hover", "focus", "escape-dismiss", "light", "dark"] }, "openQuestions": [ "Which Tooltip-family stories should later join automated accessibility gates?", "Should clearly interactive tooltip content eventually trigger dev-time warnings, or remain a docs-and-review boundary?" ] }, "generated": { "family": "tooltip", "generationStatus": "generated", "links": { "referenceDocs": [ "docs/reference/architecture.md", "docs/reference/spec.md", "docs/reference/ai-metadata.md", "docs/reference/testing.md", "docs/reference/governance.md" ], "guides": ["docs/guides/adding-components.md", "docs/guides/figma-to-marwes.md"], "audits": ["docs/audits/README.md", "docs/audits/tooltip-family-accessibility.md"], "roadmap": [ "AXE_ROADMAP.md#p2--second-component-audit-queue", "AXE_ROADMAP.md#4d--tooltip-scope-discipline" ], "core": [ "packages/core/src/components/atoms/tooltip/index.ts", "packages/core/src/components/atoms/tooltip/tooltip-a11y.ts", "packages/core/src/components/atoms/tooltip/tooltip-recipe.ts", "packages/core/src/components/atoms/tooltip/tooltip-types.ts" ], "presets": ["packages/presets/src/firstEdition/tooltip.css"], "react": [ "packages/react/src/components/tooltip/__tests__/index-exports.test.tsx", "packages/react/src/components/tooltip/__tests__/tooltip-group.test.tsx", "packages/react/src/components/tooltip/__tests__/tooltip.test.tsx", "packages/react/src/components/tooltip/index.ts", "packages/react/src/components/tooltip/tooltip-group.tsx", "packages/react/src/components/tooltip/tooltip.tsx" ], "vue": [ "packages/vue/src/components/tooltip/__tests__/index-exports.test.ts", "packages/vue/src/components/tooltip/__tests__/tooltip-group.test.ts", "packages/vue/src/components/tooltip/__tests__/tooltip.test.ts", "packages/vue/src/components/tooltip/index.ts", "packages/vue/src/components/tooltip/tooltip-group.ts", "packages/vue/src/components/tooltip/tooltip.ts" ], "svelte": [ "packages/svelte/src/lib/components/tooltip/index.ts", "packages/svelte/src/lib/components/tooltip/Tooltip.svelte", "packages/svelte/src/lib/components/tooltip/TooltipGroup.svelte", "packages/svelte/src/lib/components/tooltip/types.ts" ], "storybookReact": [ "apps/storybook-react/src/stories/tooltip/__tests__/tooltip-introduction-docs.test.ts", "apps/storybook-react/src/stories/tooltip/__tests__/tooltip-taxonomy.test.ts", "apps/storybook-react/src/stories/tooltip/Introduction.mdx", "apps/storybook-react/src/stories/tooltip/tooltip-group.stories.tsx", "apps/storybook-react/src/stories/tooltip/tooltip.stories.tsx" ], "storybookVue": [ "apps/storybook-vue/src/stories/tooltip/__tests__/tooltip-introduction-docs.test.ts", "apps/storybook-vue/src/stories/tooltip/__tests__/tooltip-taxonomy.test.ts", "apps/storybook-vue/src/stories/tooltip/Introduction.mdx", "apps/storybook-vue/src/stories/tooltip/tooltip-group.stories.ts", "apps/storybook-vue/src/stories/tooltip/tooltip.stories.ts" ], "storybookSvelte": [ "apps/storybook-svelte/src/stories/tooltip/__tests__/tooltip-taxonomy-introduction-docs.test.ts", "apps/storybook-svelte/src/stories/tooltip/Introduction.mdx", "apps/storybook-svelte/src/stories/tooltip/tooltip-group.stories.ts", "apps/storybook-svelte/src/stories/tooltip/tooltip.stories.ts", "apps/storybook-svelte/src/stories/tooltip/TooltipDark.svelte", "apps/storybook-svelte/src/stories/tooltip/TooltipGroupDark.svelte" ], "contracts": ["tests/contracts/tooltip.contract.ts"] }, "semantics": { "coverageLevel": "family-local", "dataComponent": null, "canonicalAttributes": [], "allowedPurposes": [], "purposeAttributes": {}, "sourceOfTruthPaths": [ "packages/core/src/components/atoms/tooltip/tooltip-recipe.ts", "packages/react/src/components/tooltip/tooltip-group.tsx", "packages/vue/src/components/tooltip/tooltip-group.ts" ], "notes": [ "Tooltip is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=tooltip from core, while TooltipGroup adds its own tooltip-group metadata in the adapters." ] }, "design": { "componentJsons": [ ".figma/marwes/components/tooltip.json", ".figma/marwes/components/tooltip-group.json" ], "curatedReferences": [ ".figma/INDEX.md", ".figma/NODE_REFERENCE.md", ".figma/nodes.json", ".figma/marwes/components/_index.json", ".figma/marwes/manifest.json", ".figma/marwes/README.md", ".figma/marwes/pages/-tooltip/README.md" ], "pageReferences": [ ".figma/marwes/pages/-tooltip/component-container_1574-21156.json", ".figma/marwes/pages/-tooltip/-tooltip-group_1574-21179.json", ".figma/marwes/pages/-tooltip/-tooltip-group-dark_1574-21235.json" ], "nodeReferences": { "tooltipComponent": "1364:7739", "tooltipGroupComponent": "1574:21100", "tooltipComponentContainer": "1574:21156", "tooltipGroupLightFrame": "1574:21179", "tooltipGroupDarkFrame": "1574:21235" }, "figmaTokens": [], "figmaStates": { "baseVariants": ["tooltip", "tooltip-group"], "interactionStates": [ "open", "closed", "hover", "focus", "escape-dismiss", "light", "dark" ] } }, "coverage": { "react": true, "vue": true, "svelte": true, "storybookReact": true, "storybookVue": true, "storybookSvelte": true, "contractsPresent": true, "auditDocPresent": true, "figmaReferencesPresent": true }, "notes": [ "Tooltip is not part of the wave-1 canonical semantic registry in @marwes-ui/core.", "The atom emits data-component=tooltip from core, while TooltipGroup adds its own tooltip-group metadata in the adapters.", "Generated from docs/registry/families/tooltip/registry.meta.json and scripts/generate-component-registry.ts." ] } } ] }