Used inside the home Menu Grid (the 4×N icon-and-label grid above the bills/transfer shortcuts) and inside the "Customize your home" reordering screen, where Add/Remove overlays appear over the icon during edit mode. Vertical orientation is the dominant home-grid usage; horizontal is reserved for list-style surfaces (e.g. the recent-services drawer).

• State=Disbaled is misspelled across 6 variants. Every horizontal/disabled variant in the component set has State=Disbaled (typo) in its component name. This propagates to Code Connect prop names and gets baked into native APIs. Rename to Disabled in Figma. C2 · Variant & Property Naming
• Type axis bundles unrelated concerns. Type = Default | New | Add | Remove conflates a content-presence flag (New = badge present), an action overlay (Add / Remove), and the neutral case (Default). These should be two orthogonal axes: badge: .none | .new and action: .none | .add | .remove. Today, a "New" tile can't simultaneously be in Remove mode during edit. C2 · Variant & Property Naming
• Inactive and Disabled render the same. No visual difference between State=Inactive and State=Disabled — both dim the label to a muted blue. Functionally they should differ: Inactive = visible but not tappable for business reasons; Disabled = visible but not tappable for state reasons (form invalid, feature flag off). Pick distinct treatments. C5 · Interaction State Coverage
• No Pressed state. Tiles are primary tap targets but have no pressed feedback. Add a transient treatment (8% darken on icon-slot bg, or a 0.97 scale) on touch-down. C5 · Interaction State Coverage
• Icon Action overlays are 12 × 12 but tap-area unannotated. The + and – Icon Action circles are tiny (12 px). They're separate tap targets from the tile itself but no minimum tap area is annotated. Native devs default to wrapping the whole tile, which kills the edit-mode UX. C5 · Interaction State Coverage
• Description text node is baked. Both #label and #description are always present in the layer tree. Consumers can't hide just description (most home-grid usages don't need it). Should be an optional text slot. C4 · Native Mappability
• Code Connect mappings not registered. Blocked on the State typo fix and the Type-axis split. C7 · Code Connect Linkability

• Fix the State=Disbaled typo. Rename in Figma across all 6 affected variants. Verify no consumer screens reference the old prop value via Code Connect. Rename
• Split Type into badge + action axes. Target schema: badge: .none | .new + action: .none | .add | .remove. Each is an optional slot/overlay; combinations like "New + Remove" become expressible without new variants. Total variant count stays similar but covers the full matrix instead of the linear union. Property
• Distinguish Inactive from Disabled. Inactive: label dims to main/text/color/disabled, still tappable (e.g. opens an "unavailable" sheet). Disabled: 40% opacity on the whole tile + pointer-events: none + aria-disabled. Document the semantic difference. State
• Promote description to an optional content slot. Most home-grid usages only show the label. Make description a slot that consumers fill when needed, instead of a baked text node with placeholder copy that ships in production by mistake. Slot
• Add a Pressed state. Touch-down: 8% darken on icon-slot bg + 0.97 scale on the whole tile. Touch-up: snap back. Improves perceived responsiveness on the home grid. State
• Annotate Icon Action tap-area. The 12 px + and – circles need a 44 × 44 (iOS) / 48 dp (Android) hit-area extension so users can reliably tap them in edit mode. Document this on the component. A11y
• Document edit-mode interaction model. Add and Remove overlays only appear when the parent (Menu Grid in edit mode) is reordering. Document the parent contract — the Service Item shouldn't need to know about the parent's edit state directly. Docs