@decantr/content 3.8.0

package/patterns/terminal-emulator.json

@@ -0,0 +1,117 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "terminal-emulator",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Terminal Emulator",
+  "description": "Interactive terminal input/output area with command history, tab completion, and ANSI color support.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Scrollable output with input line and command prompt",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _hfull _mono _bgblack _fggreen",
+        "slots": {
+          "output": "Scrollable command output with ANSI color support",
+          "input": "Command input with $ prompt and blinking cursor",
+          "history": "Command history accessible via up/down arrows"
+        }
+      }
+    },
+    "readonly": {
+      "description": "Output only display, no input capability",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _hfull _mono _bgblack _fggreen",
+        "slots": {
+          "output": "Scrollable read-only output display"
+        }
+      }
+    },
+    "split": {
+      "description": "Input and output in separate panes",
+      "components": [],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _hfull _mono _bgblack _fggreen",
+        "slots": {
+          "output": "Top pane for command output",
+          "input": "Bottom pane for command input"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _hfull _mono _bgblack _fggreen",
+    "slots": {
+      "output": "Scrollable command output with ANSI color support",
+      "input": "Command input with prompt and cursor",
+      "history": "Command history navigation"
+    }
+  },
+  "features": [
+    "command-history",
+    "tab-completion",
+    "ansi-colors",
+    "copy-paste",
+    "clear-screen",
+    "search-history"
+  ],
+  "keyboard_shortcuts": {
+    "Enter": "Execute command",
+    "ArrowUp": "Previous command in history",
+    "ArrowDown": "Next command in history",
+    "Ctrl+L": "Clear screen",
+    "Ctrl+R": "Search history",
+    "Tab": "Autocomplete"
+  },
+  "visual_brief": "Dark-background panel with a scrollable output area showing previous command-output pairs in monospace green-on-dark text. ANSI color codes render as styled spans (red errors, yellow warnings, blue info, etc.). At the bottom, a command input line shows a prompt character ($ or >) followed by a blinking cursor. Tab completion suggestions appear as a horizontal row above the input. Command history is navigable with up/down arrows. The readonly preset disables the input and shows only output. The split preset divides into two side-by-side terminal panels.",
+  "responsive": {
+    "mobile": "Terminal takes full width. Font size adjusts for readability on small screens. Tab completion uses a scrollable row. Command history via swipe gestures.",
+    "tablet": "Standard terminal proportions. Comfortable font size. Tab completion visible.",
+    "desktop": "Full terminal with generous width for long output lines. Split preset available. Tab completion and history fully functional."
+  },
+  "layout_hints": {
+    "io_priority": "Output history should remain visually dominant, with the prompt/input line clearly anchored as the next action. Tab completion and history controls support the loop but should not break it.",
+    "terminal_continuity": "Command, output, and prompt should read as one continuous session rather than separate cards or widgets.",
+    "split_variant": "When split mode is used, preserve one clearly active pane so users understand where command focus currently lives."
+  },
+  "motion": {
+    "micro": "Prompt focus, completions, and active pane state may brighten subtly to confirm input readiness.",
+    "transitions": "Command execution and output streaming should feel like continuous terminal flow rather than chunked UI animation."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Terminal emulator",
+    "keyboard": [
+      "Focus should move predictably between output, prompt, history, and completion suggestions without losing command context."
+    ],
+    "announcements": [
+      "Prompt readiness, command output, errors, and active completions should be exposed semantically so the terminal remains usable beyond color and cursor cues."
+    ]
+  }
+}

package/patterns/testimonials.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "testimonials",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Testimonials",
+  "description": "Customer testimonial quotes with avatars, names, roles, and optional company logos",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Avatar",
+        "Image",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Avatar",
+    "Image",
+    "icon"
+  ],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Grid of testimonial cards, each with quote, avatar, name, and role",
+      "components": [
+        "Card",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap6 _py12 _px6",
+        "slots": {
+          "heading": "Optional section heading with _heading2 _textCenter",
+          "testimonial-card": "Card with quote icon, testimonial text, and author row",
+          "quote-icon": "Large decorative open-quote icon in muted primary color at top",
+          "quote-text": "Testimonial paragraph with _body _italic _leading[relaxed]",
+          "author": "Row: Avatar (40px) + name (_textsm _fontmedium) + role/company (_textsm _fgmuted)"
+        }
+      }
+    },
+    "carousel": {
+      "description": "Horizontally scrollable carousel with one featured testimonial visible at a time",
+      "components": [
+        "Card",
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap6 _py12 _px6 _overflow[hidden]",
+        "slots": {
+          "testimonial-slide": "Single visible testimonial with large quote text and author",
+          "navigation": "Prev/next arrow Buttons and dot indicators below",
+          "author": "Centered Avatar + name + role + optional company logo"
+        }
+      }
+    },
+    "featured": {
+      "description": "Single large testimonial with company logo, centered layout",
+      "components": [
+        "Avatar",
+        "Image",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _textCenter _gap6 _py16 _px6 _mw[720px] _mx[auto]",
+        "slots": {
+          "company-logo": "Company or brand logo Image above quote",
+          "quote-text": "Large testimonial text with _textlg _italic _leading[relaxed]",
+          "author": "Avatar + name + role centered below quote"
+        }
+      }
+    }
+  },
+  "visual_brief": "Section displaying customer testimonials in a grid of cards. Each card has a large decorative open-quote icon (in muted primary color) at the top-left, followed by the testimonial text in italic body-size type with relaxed line-height. At the bottom of each card, an author row shows a circular avatar (40px), the person's name in medium-weight small text, and their role/company in muted small text. Cards have consistent padding (p6), rounded corners, and subtle border or shadow. The carousel preset shows one testimonial at a time with large centered text, prev/next arrow buttons on either side, and dot navigation indicators below. The featured preset centers a single prominent testimonial with the company logo above the quote.",
+  "responsive": {
+    "mobile": "Grid collapses to single column. Cards go full-width. Carousel shows one testimonial with swipe gesture support and dot indicators. Featured preset reduces quote text size. Padding to px4 py8.",
+    "tablet": "Two-column grid. Carousel controls visible. Featured preset centered with comfortable max-width.",
+    "desktop": "Three-column grid with gap6. Carousel shows prev/next buttons on hover. Featured preset at 720px max-width centered."
+  },
+  "motion": {
+    "micro": "Carousel slides transition with 400ms ease translateX. Auto-play advances every 5s.",
+    "transitions": "Testimonial cards fade in on section enter with 300ms ease. Carousel dot indicators pulse on active transition."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scroll-reveal",
+    "drag-reorder"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-roledescription": "carousel",
+    "aria-label": "Customer testimonials",
+    "keyboard": [
+      "Tab moves to next/previous carousel controls",
+      "Enter or Space activates carousel navigation buttons",
+      "Arrow Left/Right navigates between slides in carousel preset"
+    ],
+    "announcements": [
+      "Testimonial {number} of {total}",
+      "Slide changed to testimonial by {author}"
+    ],
+    "focus_management": "Carousel pauses auto-play when any element within receives focus. Resumes on blur after 3s delay."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap6 _py12 _px6",
+    "slots": {
+      "testimonial-card": "Quote card with author info",
+      "quote-text": "Testimonial paragraph",
+      "author": "Avatar, name, and role"
+    }
+  },
+  "composition": {
+    "Testimonials": "Grid(d-section, responsive: 1/2/3-col) > TestimonialCard[]",
+    "TestimonialCard": "Card(d-surface) > [QuoteIcon(d-annotation) + QuoteText(italic) + AuthorRow > [Avatar + AuthorInfo > [Name(font-medium) + Role(text-muted)] + CompanyLogo?]]"
+  },
+  "layout_hints": {
+    "card_treatment": "Testimonial cards should use d-surface with a thin left border (3px solid) that rotates through accent/primary colors per card. This creates visual variety without inconsistency. Include a large decorative open-quote mark in low-opacity accent color.",
+    "avatar_treatment": "Avatars should have a subtle ring: 2px solid var(--d-primary) with 2px gap (outline-offset). This frames the person and adds polish.",
+    "section_background": "Use a very subtle gradient background: linear-gradient(180deg, var(--d-bg), color-mix(in srgb, var(--d-surface) 30%, var(--d-bg))). This creates visual separation from pricing above without being heavy."
+  }
+}

package/patterns/tier-builder.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tier-builder",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tier Builder",
+  "description": "Subscription tier configuration interface with drag-reorder, benefit editor, pricing inputs, and live preview.",
+  "dependencies": {
+    "patterns": {
+      "tier-card": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "Badge",
+        "Switch",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Input",
+    "Badge",
+    "Switch",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full tier editor with drag-reorder, benefits, and live preview",
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "Badge",
+        "Switch",
+        "icon"
+      ],
+      "layout": {
+        "layout": "split",
+        "atoms": "_grid _gc1 _lg:gc2 _gap6",
+        "slots": {
+          "tier-list": "Existing tiers with drag handles for reordering",
+          "tier-form": "Create/edit tier form with all fields",
+          "benefits-editor": "Add/remove/reorder tier benefits",
+          "price-input": "Monthly and yearly pricing inputs",
+          "preview": "Live tier card preview"
+        }
+      }
+    },
+    "compact": {
+      "description": "Simplified tier list view for mobile",
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "tier-list": "Compact tier cards",
+          "add-button": "Add tier button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "split",
+    "atoms": "_grid _gc1 _lg:gc2 _gap6",
+    "slots": {
+      "tier-list": "Existing tiers",
+      "tier-form": "Tier editor form",
+      "benefits-editor": "Benefits management",
+      "preview": "Live preview"
+    }
+  },
+  "io": {
+    "produces": [
+      "tier-data",
+      "tier-saved"
+    ],
+    "consumes": [
+      "existing-tiers"
+    ]
+  },
+  "visual_brief": "Configuration interface for creating and managing subscription tiers. A tier list on the left shows existing tiers as draggable cards with name, price, and subscriber count. Selecting a tier opens an editor form on the right with fields: tier name input, price input (with currency selector), description textarea, and a benefits editor (sortable list of benefit items with add/remove). A live preview card shows how the tier will appear to subscribers. The compact preset combines the list and editor into a single-column flow. 'Add Tier' button at the bottom of the tier list.",
+  "responsive": {
+    "mobile": "Single-column layout — tier list at top, editor below when a tier is selected. Preview at the bottom. Drag-to-reorder uses long-press.",
+    "tablet": "Two-column layout — tier list on left, editor on right. Preview below the editor.",
+    "desktop": "Three-column layout — tier list, editor, and live preview all visible simultaneously."
+  },
+  "layout_hints": {
+    "builder_priority": "The tier list establishes structure, the form enables editing, and the preview confirms the subscriber-facing result. Keep those roles visually distinct.",
+    "edit_focus": "Selected tier context should remain obvious while editing benefits and pricing so users never lose track of which plan they are changing.",
+    "mobile_sequence": "On narrow screens, preserve a stable top-to-bottom flow from list to editor to preview instead of forcing simultaneous multi-panel density."
+  },
+  "motion": {
+    "micro": "Drag handles, selected tiers, and benefit rows may sharpen or highlight subtly during editing interactions.",
+    "transitions": "Tier reordering, selection changes, and preview updates should feel direct and workbench-like rather than playful."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Tier builder",
+    "keyboard": [
+      "Tier selection, form fields, and any sortable benefits should remain operable by keyboard with clear focus and ordering cues."
+    ],
+    "announcements": [
+      "Selected tier, pricing values, and benefit changes should be exposed semantically so plan editing remains understandable without drag interactions alone."
+    ]
+  },
+  "composition": {
+    "TierBuilder": "Container(d-section, split: list|editor|preview) > [TierList + TierForm + LivePreview?]",
+    "TierList": "Panel(d-surface, flex-col) > [TierItem(d-data-row, draggable)[] + AddTierButton(d-interactive)]",
+    "TierItem": "Row(d-data-row) > [DragHandle + TierName(font-medium) + Price(mono-data) + SubscriberCount(d-annotation)]",
+    "TierForm": "Form(d-surface) > [NameInput(d-control) + PriceInput(d-control, currency) + DescriptionTextarea(d-control) + BenefitsEditor > BenefitRow(d-data-row, sortable)[]]",
+    "LivePreview": "Panel(d-surface) > TierCard"
+  }
+}

package/patterns/tier-card.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tier-card",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tier Card",
+  "description": "Single subscription tier display card with pricing, benefits, and subscribe CTA. Used on storefronts and upgrade flows.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "storefront",
+  "presets": {
+    "storefront": {
+      "description": "Public-facing tier card with subscribe CTA",
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "card",
+        "atoms": "studio-card _flex _col _p6 _r3",
+        "slots": {
+          "header": "Tier name, price, badge",
+          "benefits": "List of included perks",
+          "cta": "Subscribe/upgrade button",
+          "subscribers": "Optional subscriber count"
+        }
+      }
+    },
+    "compact": {
+      "description": "Compact inline tier display with color indicator, name, and price for use in lists and selectors",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_flex _aic _gap3 _p3 _r2 _bgmuted/5",
+        "slots": {
+          "color": "Tier color indicator",
+          "name": "Tier name",
+          "price": "Price display"
+        }
+      }
+    },
+    "featured": {
+      "description": "Large highlighted tier with glow effect",
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "card",
+        "atoms": "studio-card-premium _flex _col _p8 _r4 _scale[1.05]",
+        "slots": {
+          "header": "Tier name with featured badge",
+          "benefits": "Extended benefits list",
+          "cta": "Prominent subscribe button",
+          "guarantee": "Money-back guarantee text"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "card",
+    "atoms": "studio-card _flex _col _p6 _r3",
+    "slots": {
+      "header": "Tier name and price",
+      "benefits": "Benefits list",
+      "cta": "Subscribe button"
+    }
+  },
+  "io": {
+    "produces": [
+      "subscribe-click"
+    ],
+    "consumes": [
+      "tier-data",
+      "billing-cycle"
+    ]
+  },
+  "visual_brief": "Bordered card displaying a subscription tier. Header shows the tier name and an optional 'Popular' or 'Best Value' badge. The price is prominently displayed as a large number with currency symbol and '/month' suffix. A benefits list uses checkmark icons in green/primary color with benefit text for each item. A 'Subscribe' CTA button fills the bottom of the card. The featured preset adds a colored top border or accent and slightly scales up the card. The compact preset reduces padding and uses smaller type. The storefront preset adds additional social proof (subscriber count, rating).",
+  "responsive": {
+    "mobile": "Cards stack full-width. Subscribe button full-width. Benefits list compact.",
+    "tablet": "Two or three column grid of tier cards for comparison.",
+    "desktop": "Three-column grid for plan comparison. Featured tier slightly elevated. Generous padding."
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "composition": {
+    "TierCard": "Card(d-surface, accent-border?: featured) > [TierName(heading4) + Price(mono-data, heading2) + BillingPeriod(text-muted) + BenefitsList > CheckItem(icon: check)[] + SubscribeCTA(d-interactive, variant: featured ? primary : ghost, full-width)]",
+    "SubscribeCTA": "Button(d-interactive, full-width)"
+  }
+}

package/patterns/tier-upgrade-card.json

@@ -0,0 +1,144 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tier-upgrade-card",
+  "version": "1.1.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tier Upgrade Card",
+  "description": "Pricing tier card with plan name, price, feature list, upgrade CTA, and current-plan/recommended emphasis. Used in billing portal and landing page pricing sections.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Card",
+    "CardHeader",
+    "CardBody",
+    "CardFooter",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Pricing card with plan name, monthly price, feature checklist, and upgrade button. Vertical stack layout.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "CardFooter",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0 _border _bordermuted/20 _r4 _overflow[hidden]",
+        "slots": {
+          "header": "Plan name with _heading4 and optional 'Popular' Badge",
+          "price": "Monthly price with large _heading2 number and /mo suffix",
+          "description": "One-line plan description with _bodysm _fgmuted",
+          "features": "Checklist of included features, each with check icon",
+          "cta": "Upgrade/downgrade Button, full-width in CardFooter"
+        }
+      }
+    },
+    "highlighted": {
+      "description": "Featured/recommended tier card with primary border, gradient background accent, and prominent CTA.",
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0 _border2 _borderprimary _r4 _overflow[hidden] _relative",
+        "slots": {
+          "highlight-bar": "Top gradient accent bar",
+          "badge": "Recommended/Popular Badge at top",
+          "header": "Plan name and price",
+          "features": "Feature checklist with check icons",
+          "cta": "Primary CTA with aura-glow effect"
+        }
+      }
+    },
+    "horizontal": {
+      "description": "Horizontal tier comparison row for compact billing views. Plan info on left, features in middle, CTA on right.",
+      "components": [
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap6 _px6 _py4 _borderb _bordermuted/10",
+        "slots": {
+          "plan-info": "Plan name, price, and description stacked on left",
+          "features": "Key features as horizontal Badge list",
+          "cta": "Upgrade Button on right"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap0 _border _bordermuted/20 _r4",
+    "slots": {
+      "header": "Plan name and badge",
+      "price": "Monthly price",
+      "description": "Plan description",
+      "features": "Feature checklist",
+      "cta": "Upgrade button"
+    }
+  },
+  "visual_brief": "Pricing card for upgrade flows with a header showing the plan name and an optional 'Current Plan' or 'Recommended' badge. Price displayed prominently with monthly billing amount. A short plan description below the price. A feature checklist with checkmark icons lists included features. The CTA button reads 'Upgrade' (or 'Current Plan' in disabled state for the current plan). The highlighted preset adds a primary-color border and a 'Most Popular' ribbon. The horizontal preset arranges plans side by side in a comparison table layout instead of separate cards.",
+  "responsive": {
+    "mobile": "Cards stack vertically with full-width CTAs and intact feature lists.",
+    "tablet": "Two-column or auto-fit comparison. Cards should never shrink below comfortable reading width.",
+    "desktop": "Auto-fit comparison layout with generous feature spacing. Avoid hardcoded column counts when more plans are present."
+  },
+  "motion": {
+    "micro": "Highlighted or recommended plans may use subtle border and shadow emphasis on hover, while current-plan states remain calm and stable.",
+    "transitions": "Billing-state and current-plan changes should animate softly over 150-220ms without causing the comparison grid to shift."
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "layout_hints": {
+    "card_treatment": "Current plan highlighted with a distinct active treatment and a clear 'Current' badge. Recommended upgrade options should feel stronger than generic cards and should not rely on generic ghost-button treatment for their main CTA.",
+    "comparison": "Feature comparison as checklist — checkmarks for included, dashes for excluded. Premium features in accent color. Use staged or auto-fit columns, never a rigid four-up grid.",
+    "cta_treatment": "The upgrade/manage action should always read as a decisive billing action. Current-plan state should still preserve a stable button/action slot so the card rhythm does not collapse."
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Upgrade tier card",
+    "keyboard": [
+      "Tab moves through the plan CTA and any supporting links in card order."
+    ],
+    "announcements": [
+      "Current plan and recommended-plan states should be announced semantically rather than through color alone.",
+      "Feature availability should be conveyed in text, not only in checkmark icons."
+    ],
+    "focus_management": "Keep focus on the active plan CTA or selected comparison state when billing controls update."
+  },
+  "composition": {
+    "TierUpgradeCard": "Card(d-surface, bordered) > [CardHeader > [PlanName(heading4) + PopularBadge?(d-annotation)] + Price(mono-data, heading2) + Description(text-muted) + FeatureList + CTAButton]",
+    "FeatureList": "List > FeatureItem(d-data-row) > [CheckIcon(color: success) + FeatureText][]",
+    "CTAButton": "Button(d-interactive, full-width, variant: highlighted ? primary : secondary-strong)",
+    "HighlightedCard": "TierUpgradeCard(border-primary, accent-bar-top) > PopularBadge(d-annotation)"
+  }
+}