{ "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", "summary": "A floating-action circle whose press opens an anchored menu of related actions above it.", "documentation": { "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." }, "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "code": "import React, { useState } from 'react';\nimport { cn } from '../../../utilities';\nimport { useHaptic } from '../../../hooks/useHaptic';\nimport type { HapticFeedback } from '../../../tokens/CdsHaptic';\nimport { Menu, type MenuItem } from '../../controls/Menu/Menu';\nimport styles from './FloatingActionMenuButton.module.scss';\n\n/**\n * Props for the FAB-with-menu. Open state is owned internally — `defaultOpen` only seeds it, and\n * there is no controlled `open` prop to drive it from outside.\n */\nexport interface FloatingActionMenuButtonProps {\n /** Glyph rendered in the circle, usually an `Icon`. */\n icon: React.ReactNode;\n /** Accessible name for the trigger; also labels the menu. */\n ariaLabel: string;\n /** Rows in the anchored menu (the shared `Menu` contract). */\n items: MenuItem[];\n /** Called with the pressed item's value; the menu closes first. */\n onSelect: (value: string) => void;\n /** Removes the trigger (e.g. while a sheet is open). */\n hidden?: boolean;\n /** Renders the menu open on mount. */\n defaultOpen?: boolean;\n /** Haptic feedback for trigger presses. Defaults to `true` (`light`). */\n haptic?: HapticFeedback;\n /** Class hook on the anchor wrapper, e.g. lifting `bottom` above a tab bar. */\n className?: string;\n /** Inline style override on the anchor wrapper. */\n style?: React.CSSProperties;\n /** Optional test selector. The popover gets `${testId}-menu`. */\n testId?: string;\n}\n\ntype MenuState = 'closed' | 'open' | 'closing';\n\n/**\n * Web counterpart of the iOS `FloatingActionMenuButton`: the FAB circle whose\n * press opens an anchored menu above it. Deliberately a sibling of\n * `FloatingActionButton`, not a prop on it (the industry FAB/SpeedDial\n * boundary): the trigger shares the FAB chrome by composition while the\n * interaction contract (`aria-haspopup`, open state, no loading) stays apart.\n */\nexport function FloatingActionMenuButton({\n icon,\n ariaLabel,\n items,\n onSelect,\n hidden,\n defaultOpen,\n haptic = true,\n className,\n style,\n testId,\n}: FloatingActionMenuButtonProps) {\n const [menuState, setMenuState] = useState(defaultOpen ? 'open' : 'closed');\n const fireHaptic = useHaptic('light');\n\n if (hidden) {\n return null;\n }\n\n const isOpen = menuState === 'open';\n\n const handleTriggerPress = () => {\n fireHaptic(haptic);\n setMenuState(prev => (prev === 'open' ? 'closing' : 'open'));\n };\n\n const handleSelect = (value: string) => {\n setMenuState('closing');\n onSelect(value);\n };\n\n const handlePopoverAnimationEnd = (event: React.AnimationEvent) => {\n // Row-level animations bubble; only settle on the popover's own exit.\n if (event.target !== event.currentTarget) return;\n setMenuState(prev => (prev === 'closing' ? 'closed' : prev));\n };\n\n return (\n
\n {isOpen && (\n setMenuState('closing')}\n data-testid={testId ? `${testId}-dismiss` : undefined}\n />\n )}\n \n {icon}\n \n {menuState !== 'closed' && (\n \n \n
\n )}\n \n );\n}\n" }, "spec": { "$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." } ] }, "spec_source": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.spec.json", "guidance_source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.mdx", "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec, UsageTable } from '../../../../.storybook/blocks';\nimport * as FloatingActionMenuButtonStories from './FloatingActionMenuButton.stories';\nimport floatingActionMenuButtonSpec from './FloatingActionMenuButton.spec.json';\n\n\n\n# FloatingActionMenuButton\n\nThe 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.\n\n\n\n## Use when\n\n\n\n## Anchored menu\n\nThe 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.\n\n\n\n\n## Dark theme\n\n\n\n## Design Guidelines\n\n\n\n## Props\n\n\n" }, "props": [ { "name": "icon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "Glyph rendered in the circle, usually an `Icon`.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 14 } }, { "name": "ariaLabel", "type": "string", "declared_type": "string", "required": true, "description": "Accessible name for the trigger; also labels the menu.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 16 } }, { "name": "items", "type": "MenuItem[]", "declared_type": "MenuItem[]", "required": true, "description": "Rows in the anchored menu (the shared `Menu` contract).", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 18 } }, { "name": "onSelect", "type": "(value: string) => void", "declared_type": "(value: string) => void", "required": true, "description": "Called with the pressed item's value; the menu closes first.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 20 } }, { "name": "hidden", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Removes the trigger (e.g. while a sheet is open).", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 22 }, "values": [ false, true ], "values_complete": true }, { "name": "defaultOpen", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Renders the menu open on mount.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 24 }, "values": [ false, true ], "values_complete": true }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for trigger presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 26 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Class hook on the anchor wrapper, e.g. lifting `bottom` above a tab bar.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 28 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "Inline style override on the anchor wrapper.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 30 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional test selector. The popover gets `${testId}-menu`.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 32 } } ], "prop_shapes": {}, "examples": [], "tokens": [ { "name": "--cds-size-48", "light": "48px", "dark": "48px" }, { "name": "--cds-space-8", "light": "8px", "dark": "8px" }, { "name": "--cds-size-240", "light": "240px", "dark": "240px" }, { "name": "--cds-radius-lg", "light": "20px", "dark": "20px" }, { "name": "--cds-fab-container", "light": "#ffffff99", "dark": "#ffffff1a" } ], "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": [ { "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" } ], "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: },\n { value: 'text', label: 'Text', leading: },\n { value: 'call', label: 'Call', leading: },\n];\n\nconst meta: Meta = {\n parameters: { a11y: { test: 'error' } },\n title: 'Cloaked Design System/Primitives/FloatingActionMenuButton',\n component: FloatingActionMenuButton,\n args: {\n icon: ,\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
\n \n Screen content\n \n \n
\n ),\n ],\n};\nexport default meta;\ntype Story = StoryObj;\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: ,\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" }, "links": { "human": "/component-floatingactionmenubutton", "json": "/data/components/floatingactionmenubutton.json", "markdown": "/data/components/floatingactionmenubutton.md", "storybook": "/storybook/?path=/story/cloaked-design-system-primitives-floatingactionmenubutton--playground" }, "contract_status": "preview", "contract_kind": "source-derived", "approval": "required", "api": { "method": "typescript-type-checker", "typescript_version": "5.9.3", "public_export": "FloatingActionMenuButton", "public_path": "FloatingActionMenuButton", "import_path": "@cloakedinc/design-system", "root_kind": "component", "entrypoints": [ { "name": "FloatingActionMenuButton", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 44 }, "props_type": "FloatingActionMenuButtonProps", "props": [ { "name": "icon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": true, "description": "Glyph rendered in the circle, usually an `Icon`.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 14 } }, { "name": "ariaLabel", "type": "string", "declared_type": "string", "required": true, "description": "Accessible name for the trigger; also labels the menu.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 16 } }, { "name": "items", "type": "MenuItem[]", "declared_type": "MenuItem[]", "required": true, "description": "Rows in the anchored menu (the shared `Menu` contract).", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 18 } }, { "name": "onSelect", "type": "(value: string) => void", "declared_type": "(value: string) => void", "required": true, "description": "Called with the pressed item's value; the menu closes first.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 20 } }, { "name": "hidden", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Removes the trigger (e.g. while a sheet is open).", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 22 }, "values": [ false, true ], "values_complete": true }, { "name": "defaultOpen", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Renders the menu open on mount.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 24 }, "values": [ false, true ], "values_complete": true }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for trigger presses. Defaults to `true` (`light`).", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 26 }, "values": [ "error", "heavy", "light", "medium", "selection", "success", "warning", false, true ], "values_complete": true, "default": "true", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Class hook on the anchor wrapper, e.g. lifting `bottom` above a tab bar.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 28 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "Inline style override on the anchor wrapper.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 30 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional test selector. The popover gets `${testId}-menu`.", "source": { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 32 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" } ], "type_sources": [ { "path": "packages/design-system/src/components/controls/Menu/Menu.tsx", "line": 15, "name": "MenuItem", "code": "export interface MenuItem {\n /** Emitted by `onSelect`, matched against `MenuProps.value`, and used as the React key. */\n value: string;\n /** Primary row text. A node, but keep it inline: it renders inside a `Text`. */\n label: React.ReactNode;\n /** Optional leading content, usually an `Icon`. */\n leading?: React.ReactNode;\n /** Second line under the label, for spelling out an action's consequence. */\n description?: React.ReactNode;\n /** Blocks the press and dims the row, so `onSelect` never fires for it. */\n disabled?: boolean;\n /** Applies danger text treatment for destructive actions. */\n destructive?: boolean;\n /** Optional test selector. Falls back to `${testId}-${value}`. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/components/primitives/FloatingActionMenuButton/FloatingActionMenuButton.tsx", "line": 12, "name": "FloatingActionMenuButtonProps", "code": "export interface FloatingActionMenuButtonProps {\n /** Glyph rendered in the circle, usually an `Icon`. */\n icon: React.ReactNode;\n /** Accessible name for the trigger; also labels the menu. */\n ariaLabel: string;\n /** Rows in the anchored menu (the shared `Menu` contract). */\n items: MenuItem[];\n /** Called with the pressed item's value; the menu closes first. */\n onSelect: (value: string) => void;\n /** Removes the trigger (e.g. while a sheet is open). */\n hidden?: boolean;\n /** Renders the menu open on mount. */\n defaultOpen?: boolean;\n /** Haptic feedback for trigger presses. Defaults to `true` (`light`). */\n haptic?: HapticFeedback;\n /** Class hook on the anchor wrapper, e.g. lifting `bottom` above a tab bar. */\n className?: string;\n /** Inline style override on the anchor wrapper. */\n style?: React.CSSProperties;\n /** Optional test selector. The popover gets `${testId}-menu`. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/tokens/CdsHaptic.ts", "line": 6, "name": "HapticFeedback", "code": "export type HapticFeedback = boolean | HapticType;" }, { "path": "packages/design-system/src/tokens/HapticType.ts", "line": 2, "name": "HapticType", "code": "export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';" } ], "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source." }, "platforms": { "implemented": [ "web" ], "native": "Imported design guidance only; no native implementation or parity verification in this preview.", "react": { "implementation": "local", "status": "preview", "parity": "web-reference" }, "vue": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "swift": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "kotlin": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" } }, "missing_facts": [ { "code": "human-review-pending", "detail": "This local preview has no recorded human design or engineering sign-off." }, { "code": "platform-parity-unverified", "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified." }, { "code": "figma-mapping-unverified", "detail": "No current component-level Figma node and immutable revision have been verified for this contract." } ], "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." } }