{
  "version": "0.2.0-preview.1",
  "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721",
  "status": "preview",
  "authority": {
    "repository": "cloakedinc/design",
    "path": "packages/design-system",
    "catalog": "packages/design-system/catalog.json",
    "status": "preview"
  },
  "provenance": {
    "repo": "cloakedinc/automation",
    "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "path": "packages/design-system",
    "imported_spec_status": "approved"
  },
  "adaptations": [
    {
      "id": "button-content-gap",
      "status": "preview",
      "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap."
    },
    {
      "id": "keyboard-focus",
      "status": "preview",
      "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows."
    },
    {
      "id": "supporting-text-contrast",
      "status": "preview",
      "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream."
    },
    {
      "id": "danger-text-contrast",
      "status": "preview",
      "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair."
    },
    {
      "id": "preview-status",
      "status": "preview",
      "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only."
    },
    {
      "id": "motion-comparison-accessibility",
      "status": "preview",
      "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens."
    },
    {
      "id": "list-item-ownership",
      "status": "preview",
      "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics."
    },
    {
      "id": "card-delta-text-contrast",
      "status": "preview",
      "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills."
    },
    {
      "id": "carousel-keyboard-access",
      "status": "preview",
      "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel."
    }
  ],
  "id": "floatingactionmenubutton",
  "name": "FloatingActionMenuButton",
  "category": "Primitives",
  "contract_status": "preview",
  "contract_kind": "source-derived",
  "review": {
    "local_status": "not-reviewed",
    "source_approval": null,
    "imported_spec_status": "approved",
    "spec_origin": "imported-adapted",
    "local_spec_source_status": "approved",
    "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
  },
  "approval": "required",
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-primitives-floatingactionmenubutton--playground",
        "name": "Playground",
        "title": "Cloaked Design System/Primitives/FloatingActionMenuButton",
        "exportName": "Playground",
        "source_path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.stories.tsx",
        "source_digest": "fee2f81f735d75b474757a8968dc4d8288e35e7210a3f49705f4ddcbbdfe3524",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-floatingactionmenubutton--playground&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-floatingactionmenubutton--open",
        "name": "Open",
        "title": "Cloaked Design System/Primitives/FloatingActionMenuButton",
        "exportName": "Open",
        "source_path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.stories.tsx",
        "source_digest": "fee2f81f735d75b474757a8968dc4d8288e35e7210a3f49705f4ddcbbdfe3524",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-floatingactionmenubutton--open&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-floatingactionmenubutton--destructive-row",
        "name": "Destructive Row",
        "title": "Cloaked Design System/Primitives/FloatingActionMenuButton",
        "exportName": "DestructiveRow",
        "source_path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.stories.tsx",
        "source_digest": "fee2f81f735d75b474757a8968dc4d8288e35e7210a3f49705f4ddcbbdfe3524",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-floatingactionmenubutton--destructive-row&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-floatingactionmenubutton--dark-theme",
        "name": "Dark Theme",
        "title": "Cloaked Design System/Primitives/FloatingActionMenuButton",
        "exportName": "DarkTheme",
        "source_path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.stories.tsx",
        "source_digest": "fee2f81f735d75b474757a8968dc4d8288e35e7210a3f49705f4ddcbbdfe3524",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-floatingactionmenubutton--dark-theme&viewMode=story"
      }
    ],
    "name": "FloatingActionMenuButton",
    "id": "floatingactionmenubutton",
    "category": "Primitives"
  },
  "stories_source": {
    "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.stories.tsx",
    "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { disabledControl, hapticArgType } from '../../../storybook/controlOptions';\nimport type { MenuItem } from '../../controls/Menu/Menu';\nimport { Icon } from '../Icon/Icon';\nimport { Text } from '../Text/Text';\nimport { FloatingActionMenuButton } from './FloatingActionMenuButton';\n\n// Containing-block trick per FloatingActionButton.stories.tsx PHONE_FRAME.\nconst PHONE_FRAME: React.CSSProperties = {\n    position: 'relative',\n    width: 320,\n    height: 480,\n    overflow: 'hidden',\n    transform: 'translateZ(0)',\n    border: 'var(--cds-border-width-default) dashed var(--cds-divider)',\n    borderRadius: 'var(--cds-radius-lg)',\n    background: 'var(--cds-bg-page)',\n    padding: 'var(--cds-space-16)',\n};\n\nconst COMPOSE_ITEMS: MenuItem[] = [\n    { value: 'email', label: 'Email', leading: <Icon name='mail' size='small' /> },\n    { value: 'text', label: 'Text', leading: <Icon name='message' size='small' /> },\n    { value: 'call', label: 'Call', leading: <Icon name='phone' size='small' /> },\n];\n\nconst meta: Meta<typeof FloatingActionMenuButton> = {\n    parameters: { a11y: { test: 'error' } },\n    title: 'Cloaked Design System/Primitives/FloatingActionMenuButton',\n    component: FloatingActionMenuButton,\n    args: {\n        icon: <Icon name='add' size='medium' />,\n        ariaLabel: 'Compose',\n        items: COMPOSE_ITEMS,\n        onSelect: () => undefined,\n    },\n    argTypes: {\n        icon: { ...disabledControl, description: 'Glyph in the circle, usually an `Icon`.' },\n        ariaLabel: { description: 'Required accessible name for the trigger; also labels the menu.' },\n        items: { ...disabledControl, description: 'Menu rows — the shared `MenuItem` contract.' },\n        onSelect: { ...disabledControl, description: 'Receives the pressed item value after the menu closes.' },\n        hidden: { description: 'Removes the trigger, e.g. while a sheet is open.' },\n        defaultOpen: { ...disabledControl, description: 'Renders the menu open on mount (docs and tests).' },\n        haptic: {\n            ...hapticArgType,\n            description: 'Haptic for trigger presses; rows fire their own via `Menu`.',\n        },\n        className: { ...disabledControl, description: 'Override hook, e.g. lift `bottom` above a tab bar.' },\n        testId: { ...disabledControl, description: 'Kebab-case selector; popover gets `-menu` suffix.' },\n    },\n    decorators: [\n        Story => (\n            <div style={PHONE_FRAME}>\n                <Text variant='body-small' color='secondary'>\n                    Screen content\n                </Text>\n                <Story />\n            </div>\n        ),\n    ],\n};\nexport default meta;\ntype Story = StoryObj<typeof FloatingActionMenuButton>;\n\nexport const Playground: Story = {\n    args: { testId: 'fab-menu-playground' },\n};\n\nexport const Open: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story:\n                    'The anchored popover opens upward from the trigger, right-aligned — the web stand-in for ' +\n                    'the native iOS pull-down menu. Tapping outside or picking a row closes it.',\n            },\n        },\n    },\n    args: { defaultOpen: true, testId: 'fab-menu-open' },\n};\n\nexport const DestructiveRow: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: 'Rows carry the full `MenuItem` contract — leading icons, `destructive`, `disabled`.',\n            },\n        },\n    },\n    args: {\n        defaultOpen: true,\n        items: [\n            ...COMPOSE_ITEMS,\n            {\n                value: 'discard',\n                label: 'Discard draft',\n                destructive: true,\n                leading: <Icon name='close' size='small' />,\n            },\n        ],\n        testId: 'fab-menu-destructive',\n    },\n};\n\nexport const DarkTheme: Story = {\n    globals: { theme: 'dark' },\n    args: { defaultOpen: true, testId: 'fab-menu-dark' },\n};\n"
  },
  "specification": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "FloatingActionMenuButton",
      "status": "preview",
      "version": "1.0.0",
      "summary": "A floating-action circle whose press opens an anchored menu of related actions above it."
    },
    "parts": [
      {
        "id": "trigger",
        "label": "Trigger",
        "description": "The FloatingActionButton chrome carrying menu-trigger semantics (aria-haspopup, aria-expanded)."
      },
      {
        "id": "popover",
        "label": "Popover",
        "description": "The anchored surface above the trigger holding the menu rows."
      },
      {
        "id": "rows",
        "label": "Menu rows",
        "description": "Shared Menu rows with leading icons, destructive and disabled treatments."
      },
      {
        "id": "dismiss-layer",
        "label": "Dismiss layer",
        "description": "Invisible full-screen layer that closes the menu on an outside tap."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "default": {
          "label": "Default",
          "description": "Single treatment; there is no variant axis."
        }
      },
      "sizes": {
        "default": {
          "label": "Default",
          "description": "Fixed 48px trigger; the popover sizes to its rows."
        }
      }
    },
    "variants": [
      {
        "id": "default",
        "label": "Default",
        "description": "Glass trigger circle with an anchored menu opening upward, right-aligned.",
        "platforms": [
          "ios",
          "web"
        ]
      }
    ],
    "sizes": [
      {
        "id": "default",
        "label": "Default",
        "description": "48px trigger matching FloatingActionButton; popover height follows content."
      }
    ],
    "measurements": [
      {
        "id": "trigger-diameter",
        "label": "Trigger diameter",
        "kind": "exact",
        "token": "--cds-size-48",
        "value": 48,
        "unit": "px",
        "appliesTo": [
          "trigger"
        ]
      },
      {
        "id": "popover-gap",
        "label": "Gap between trigger and popover",
        "kind": "exact",
        "token": "--cds-space-8",
        "value": 8,
        "unit": "px",
        "appliesTo": [
          "popover"
        ]
      },
      {
        "id": "popover-min-width",
        "label": "Popover minimum width",
        "kind": "exact",
        "token": "--cds-size-240",
        "value": 240,
        "unit": "px",
        "appliesTo": [
          "popover"
        ]
      },
      {
        "id": "popover-radius",
        "label": "Popover corner radius",
        "kind": "exact",
        "token": "--cds-radius-lg",
        "value": 20,
        "unit": "px",
        "appliesTo": [
          "popover"
        ]
      }
    ],
    "layout": {
      "alignment": "The popover is right-aligned to the trigger and opens upward with a bottom-right transform origin.",
      "flow": "A fixed anchor wrapper owns positioning and hosts the trigger, popover, and dismiss layer, so a positioning override moves the whole assembly.",
      "notes": [
        "Not portaled, matching FloatingActionButton: a transformed screen container contains all three layers so the assembly rides screen transitions.",
        "The popover z-tier sits just above the trigger and far below the BottomSheet/Dialog overlay tier."
      ]
    },
    "typographyAndColor": {
      "typography": [],
      "colors": [
        {
          "label": "Trigger container",
          "description": "Shares FloatingActionButton's frosted-glass fill.",
          "token": "--cds-fab-container"
        },
        {
          "label": "Popover surface",
          "description": "Frosted like the trigger, with the heavy menu-material blur for row legibility.",
          "token": "--cds-fab-container"
        }
      ]
    },
    "states": [
      {
        "id": "closed",
        "label": "Closed",
        "description": "Only the trigger is visible; aria-expanded is false."
      },
      {
        "id": "open",
        "label": "Open",
        "description": "The popover scales in above the trigger; an outside tap or row selection closes it."
      },
      {
        "id": "hidden",
        "label": "Hidden",
        "description": "The hidden prop removes the whole assembly."
      }
    ],
    "behavior": [
      {
        "label": "Toggle",
        "description": "Pressing the trigger toggles the menu; it never runs an action directly and has no loading state."
      },
      {
        "label": "Select",
        "description": "Row selection closes the menu, then calls onSelect with the row value."
      },
      {
        "label": "Dismiss",
        "description": "Tapping anywhere outside the popover closes it without selecting."
      }
    ],
    "accessibility": [
      {
        "label": "Menu trigger semantics",
        "description": "The trigger exposes aria-haspopup=menu and reflects open state via aria-expanded."
      },
      {
        "label": "Menu semantics",
        "description": "Rows render through Menu, which provides role=menu and per-row accessible names."
      },
      {
        "label": "Accessible name",
        "description": "ariaLabel is required and labels both the trigger and the menu."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Row count",
        "description": "Use 2-5 closely related actions; longer or data-driven lists belong in Select or a BottomSheet."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Open",
          "description": "The popover scales and fades in from its bottom-right anchor over the base duration; reduced-motion renders it instantly."
        },
        {
          "label": "Close",
          "description": "Dismissal or selection scales and fades the popover out with the exit curve before unmounting."
        }
      ],
      "haptics": [
        {
          "label": "Trigger and rows",
          "description": "The trigger fires a light haptic; rows fire their own through the shared Menu."
        }
      ]
    },
    "platformDifferences": [
      {
        "platforms": [
          "web"
        ],
        "description": "iOS presents the native pull-down menu (glass, anchored by the system); web renders a private anchored popover styled with design-system surface tokens.",
        "rationale": "WKWebView content cannot invoke the native menu, so the web version approximates its anchoring and motion with the shared Menu rows."
      }
    ]
  },
  "specification_source": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.spec.json",
  "guidance": {
    "summary": "A floating-action circle whose press opens an anchored menu of related actions above it.",
    "guidance": [
      {
        "heading": "Overview",
        "body": "The floating-action circle whose press opens an anchored menu of related actions —\nthe web counterpart of the iOS `FloatingActionMenuButton` (which wraps the native\npull-down menu). It shares `FloatingActionButton`'s chrome and anchoring but is a\nseparate component: the interaction contract differs (`aria-haspopup` trigger,\nopen/close state, no loading), which is the FAB/SpeedDial boundary every major\ndesign system draws."
      },
      {
        "heading": "Anchored menu",
        "body": "The popover opens upward from the trigger, right-aligned, inside the same\ncontaining block — so it rides screen transitions with the FAB. Rows reuse the\nshared `Menu` contract (`MenuItem`: leading icon, `destructive`, `disabled`) and\ntheir haptics. Tapping outside or selecting a row closes it; selection closes\nbefore `onSelect` fires."
      }
    ],
    "usage": [
      {
        "variant": "FloatingActionButton",
        "use": "The screen has ONE primary creation action — press runs it directly, with optional loading.",
        "avoid": "Cramming multiple actions behind a single tap."
      },
      {
        "variant": "FloatingActionMenuButton",
        "use": "The screen has 2–5 closely related creation actions (compose via email / text / call). Press reveals them without leaving the screen.",
        "avoid": "A single action (use FloatingActionButton); long or data-driven pick lists (use Select or BottomSheet + Menu)."
      }
    ],
    "examples": [],
    "source": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.mdx",
    "status": "local-preview",
    "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
  },
  "links": {
    "human": "/component-floatingactionmenubutton",
    "json": "/data/visual/components/floatingactionmenubutton.json",
    "storybook": "/storybook/?path=/story/cloaked-design-system-primitives-floatingactionmenubutton--playground"
  }
}