@mindlogic-ai/logician-ui 4.0.0-alpha.42 → 4.0.0-alpha.44

package/src/components/Button/Button.cursor.test.tsx

@@ -0,0 +1,60 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Button } from './Button';
+
+/**
+ * A disabled Button must not show the pointer.
+ *
+ * The Button sets `cursor="pointer"` as a style prop, which Chakra emits
+ * outside its cascade layers, while the recipe's disabled cursor sits inside
+ * `@layer recipes` — so the pointer won and a disabled button read as
+ * clickable (FactChat's 「현재 플랜」 button).
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('Button disabled cursor', () => {
+  it('enabled keeps the pointer', () => {
+    wrap(<Button>on</Button>);
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe('pointer');
+  });
+
+  it('disabled shows not-allowed', () => {
+    wrap(<Button disabled>off</Button>);
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe(
+      'not-allowed'
+    );
+  });
+
+  it('a call-site _disabled does not drop it', () => {
+    wrap(
+      <Button disabled _disabled={{ opacity: 0.3 }}>
+        off
+      </Button>
+    );
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe(
+      'not-allowed'
+    );
+  });
+
+  it('lift keeps it too', () => {
+    wrap(
+      <Button disabled lift>
+        off
+      </Button>
+    );
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe(
+      'not-allowed'
+    );
+  });
+
+  it('loading shows progress, not not-allowed', () => {
+    wrap(<Button loading>busy</Button>);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(getComputedStyle(button).cursor).toBe('progress');
+  });
+});

package/src/components/Button/Button.styles.ts

@@ -31,14 +31,18 @@ type StyleProps = Partial<ChakraButtonProps>;
 const PRESS = 'var(--chakra-durations-motion-press)';
 const FEEDBACK = 'var(--chakra-durations-fast)';
 const STANDARD = 'var(--chakra-easings-standard)';
+// The press is contact, so it eases out: `standard` starts slowly and the
+// first frames lag behind the finger.
+const EMPHASIZED = 'var(--chakra-easings-emphasized)';
 
 export const buttonTransition = [
-  `scale ${PRESS} ${STANDARD}`,
+  `scale ${PRESS} ${EMPHASIZED}`,
   ...[
     'background-color',
     'border-color',
     'color',
-    'box-shadow',
+    // No `box-shadow`: no variant sets one, so the only box-shadow that ever
+    // changes here is the keyboard focus ring, and that should appear at once.
     'opacity',
     // Both moved by `lift`, listed unconditionally because a property nobody
     // changes costs nothing, and leaving them out would make the opt-in jump.

package/src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import { Button as ChakraButton } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
+import { mergeCss } from '@/utils/mergeCss';
 
 import { polymorphic } from '../../types/polymorphic';
 import { buttonTransition, getButtonStyles } from './Button.styles';
@@ -35,6 +36,7 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       _hover: hoverProp,
       _active: activeProp,
+      _disabled: disabledProp,
       ...rest
     },
     ref
@@ -91,9 +93,22 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
         // FactChat puts on its quiz buttons — used to silently drop the
         // variant's pressed colour *and* the scale with it, and the button
         // stopped reading as pressed at all. Its own keys still win; it just
-        // no longer erases the ones it did not mention.
-        _hover={{ ...styles._hover, ...hoverProp }}
-        _active={{ ...styles._active, ...activeProp }}
+        // no longer erases the ones it did not mention. Deep, so a nested
+        // condition (lift's `_hover._dark`) survives a call site's own `_dark`.
+        _hover={mergeCss(styles._hover, hoverProp)}
+        _active={mergeCss(styles._active, activeProp)}
+        // `cursor` is a style prop, so it lands outside Chakra's
+        // `@layer recipes` and beat the recipe's disabled cursor — every
+        // disabled Button showed a pointer and read as clickable. The
+        // disabled cursor has to sit at this level, merged like the two above
+        // so a call site's `_disabled` cannot drop it.
+        _disabled={mergeCss(
+          '_disabled' in styles ? styles._disabled : undefined,
+          // Chakra disables a `loading` button too; it is working, not
+          // forbidden, so it gets `progress`.
+          { cursor: rest.loading ? 'progress' : 'not-allowed' },
+          disabledProp
+        )}
         {...focusRing}
         cursor="pointer"
         // Explicit identity so the press transitions from a definite value

package/src/components/Checkbox/Checkbox.styles.ts

@@ -18,7 +18,7 @@ import { CHECKMARK_DASH } from '@/theme/motion';
 export const checkmarkDraw: SystemStyleObject = {
   '& polyline, & path': {
     strokeDasharray: CHECKMARK_DASH,
-    animation: `checkmark-draw var(--chakra-durations-motion-base) var(--chakra-easings-emphasized) var(--chakra-durations-motion-beat) both`,
+    animation: `checkmark-draw var(--chakra-durations-moderate) var(--chakra-easings-emphasized) var(--chakra-durations-motion-beat) both`,
   },
   _motionReduce: {
     '& polyline, & path': { animation: 'none', strokeDasharray: 'none' },

package/src/components/Collapsible/Collapsible.presence.test.tsx

@@ -57,13 +57,13 @@ describe('Collapsible presence timing', () => {
     );
   });
 
-  it('leaves in half that, on the neutral curve', () => {
+  it('leaves in half that, on the same ease-out', () => {
     const { container } = setup();
     const rules = rulesFor(container.querySelector('[data-part="content"]')!);
 
     expect(rules).toContain('animation-duration:var(--chakra-durations-fast)');
     expect(rules).toContain(
-      'animation-timing-function:var(--chakra-easings-standard)'
+      'animation-timing-function:var(--chakra-easings-emphasized)'
     );
   });
 

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -75,7 +75,9 @@ User Agent: ${errorInfo.userAgent}`;
     <Flex
       as="section"
       aria-labelledby={titleId}
-      minH="100vh"
+      // `svh`: `100vh` is the largest mobile viewport and overflows under
+      // the URL bar.
+      minH="100svh"
       align="center"
       justify="center"
       p={8}

package/src/components/IconButton/IconButton.tsx

@@ -4,6 +4,7 @@ import { IconButton as ChakraIconButton } from '@chakra-ui/react';
 import { focusRing } from '@/utils/focusRing';
 
 import { polymorphic } from '../../types/polymorphic';
+import { buttonTransition } from '../Button/Button.styles';
 import { getIconButtonStyles } from './IconButton.styles';
 import { IconButtonOwnProps, IconButtonProps } from './IconButton.types';
 
@@ -39,6 +40,12 @@ const IconButtonImpl = forwardRef(
         rounded="full"
         {...styles}
         {...focusRing}
+        // Same press as Button: it inherits the `_active` scale from the shared
+        // styles, but Chakra's `common` transition list has no `scale`, so the
+        // press used to snap. Same clock and reduced-motion guard as Button.
+        scale="1"
+        transition={buttonTransition}
+        animationStyle="composite"
         {...rest}
       >
         {children}

package/src/components/InfoSprinkle/InfoSprinkle.tsx

@@ -51,7 +51,6 @@ export const InfoSprinkle = ({
         <IconButton
           aria-label="Info"
           opacity={0.5}
-          transition="opacity 0.2s"
           _hover={{ opacity: 1, ...(iconButtonProps?._hover as any) }}
           {...iconButtonProps}
           onClick={(e) => {

package/src/components/Loaders/PageLoader.tsx

@@ -10,13 +10,16 @@ export const PageLoader = ({
     <Flex
       position="fixed"
       w="100vw"
-      h="100vh"
+      // `dvh`, not `vh`: on mobile `100vh` is the largest viewport, so the
+      // overlay ran under the URL bar.
+      h="100dvh"
       top={0}
       left={0}
       align="center"
       justify="center"
       opacity={isLoading ? 0.5 : 0}
-      transition="0.3s opacity ease"
+      animationStyle="feedback"
+      transitionProperty="opacity"
       bg="bg.canvas"
       zIndex={9999}
       {...rest}

package/src/components/Loaders/SectionLoader.tsx

@@ -17,7 +17,8 @@ export const SectionLoader = ({
       align="center"
       justify="center"
       bg="bg.canvas"
-      transition="0.3s opacity ease"
+      animationStyle="feedback"
+      transitionProperty="opacity"
       zIndex={9999}
       {...rest}
     >

package/src/components/Menu/MenuItem.tsx

@@ -27,6 +27,8 @@ const MenuItemImpl = ({
       fontWeight="semibold"
       gap={3}
       cursor="pointer"
+      // Same as `Button`: the style prop outranks the recipe's disabled cursor.
+      _disabled={{ cursor: 'not-allowed' }}
       _hover={{
         color: isDangerVariant ? 'danger.main' : 'fg.default',
         backgroundColor: isDangerVariant ? 'danger.lightest' : 'bg.subtle',

package/src/components/Menu/MenuList.tsx

@@ -59,9 +59,9 @@ export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
           p="1.5"
           // Chakra's recipe opens the menu in 150ms and closes it in 100 —
           // nearly symmetric, and shorter than everything else that appears
-          // over the page. `presence` puts it on the house enter/exit ratio;
+          // over the page. `presence-anchored` puts it on the house enter/exit ratio;
           // the slide-from-the-trigger movement is the recipe's and stays.
-          animationStyle="presence"
+          animationStyle="presence-anchored"
           {...rest}
         >
           <ScaledContext fontSize={baseFontSize}>{rows}</ScaledContext>

package/src/components/Popover/PopoverContent.tsx

@@ -18,8 +18,8 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
           borderWidth="1px"
           borderColor="border.subtle"
           // Scales from its arrow's origin on the recipe's keyframes, on our
-          // clock — see `presence`.
-          animationStyle="presence"
+          // clock — see `presence-anchored`.
+          animationStyle="presence-anchored"
           {...props}
         >
           <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>

package/src/components/Select/Combobox.tsx

@@ -27,7 +27,7 @@ const Content = forwardRef<HTMLDivElement, ChakraCombobox.ContentProps>(
         ref={ref}
         // Chakra gives this one `animationDuration: 0s` on close — the list
         // vanishes mid-keystroke with no exit at all. Same policy as Select.
-        animationStyle="presence"
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Select/Select.tsx

@@ -29,7 +29,7 @@ const Content = forwardRef<HTMLDivElement, ChakraSelect.ContentProps>(
         ref={ref}
         // Chakra closes this one over `fastest` (50ms), which is fast enough to
         // read as the list being cut off rather than dismissed.
-        animationStyle="presence"
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Tooltip/Tooltip.instant.test.tsx

@@ -0,0 +1,43 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Tooltip } from './Tooltip';
+
+/**
+ * zag marks a tooltip `data-instant` when the pointer moves to it from another
+ * open one. It skips the open delay there by itself; the animation is ours to
+ * skip. The rule has to outrank the presence clock's `:is([data-state=open])`,
+ * so this checks the emitted selector rather than trusting the cascade.
+ */
+describe('Tooltip instant mode', () => {
+  it('drops the enter/exit animation when zag marks the content instant', () => {
+    const { getByRole } = render(
+      <ChakraProvider value={system}>
+        <Tooltip content="hint" open>
+          <button type="button">trigger</button>
+        </Tooltip>
+      </ChakraProvider>
+    );
+    const content = getByRole('tooltip');
+    const css = Array.from(document.querySelectorAll('style'))
+      .map((s) => s.textContent ?? '')
+      .join('\n');
+    const classes = content.className
+      .split(' ')
+      .filter((c) => c.startsWith('css-'));
+    const rule = classes
+      .flatMap((c) => [
+        ...css.matchAll(
+          new RegExp(
+            `\\.${c}\\[data-instant\\]\\[data-state\\]\\{([^}]*)\\}`,
+            'g'
+          )
+        ),
+      ])
+      .map((m) => m[1])
+      .join(';');
+    expect(rule).toContain('animation-duration:0ms');
+  });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -53,10 +53,19 @@ export const Tooltip = forwardRef(
               // ways — which is why a tooltip used to feel like it was being
               // peeled off the trigger. It has the shortest dwell of anything
               // here, so the exit being half the enter matters most.
-              animationStyle="presence"
+              animationStyle="presence-anchored"
               {...contentProps}
               css={mergeCss(
-                { '--tooltip-bg': 'var(--chakra-colors-gray-1200)' },
+                {
+                  '--tooltip-bg': 'var(--chakra-colors-gray-1200)',
+                  // zag sets `data-instant` when the pointer moves from one
+                  // open tooltip to the next. It already skips the delay
+                  // there; skip the enter/exit too, so sweeping a toolbar
+                  // doesn't replay the animation on every button. The extra
+                  // `[data-state]` outranks the presence clock's
+                  // `:is([data-state=open])`.
+                  '&[data-instant][data-state]': { animationDuration: '0ms' },
+                },
                 contentProps?.css
               )}
             >

package/src/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.tsx

@@ -201,7 +201,8 @@ export function GraphErrorBanner({
         border="none"
         cursor="pointer"
         opacity={showValidating ? 0.6 : 1}
-        transition="opacity 0.15s"
+        animationStyle="feedback"
+        transitionProperty="opacity"
         onClick={() => setOpen((o) => !o)}
       >
         <Text fontSize="sm" fontWeight="semibold" color="slate.1300">
@@ -211,7 +212,8 @@ export function GraphErrorBanner({
           boxSize="xs"
           color="slate.900"
           transform={open ? 'rotate(180deg)' : 'none'}
-          transition="transform 0.15s"
+          animationStyle="feedback"
+          transitionProperty="transform"
         />
       </Box>
       {open ? (
@@ -221,7 +223,8 @@ export function GraphErrorBanner({
           maxH="80"
           overflowY="auto"
           opacity={showValidating ? 0.6 : 1}
-          transition="opacity 0.15s"
+          animationStyle="feedback"
+          transitionProperty="opacity"
           borderTopWidth="1px"
           borderColor="slate.200"
         >

package/src/theme/Motion.stories.tsx

@@ -178,6 +178,11 @@ const VOCAB = [
     name: 'presence',
     line: 'animationStyle="presence"',
   },
+  {
+    when: '트리거에 붙은 팝업이 열리고 닫힌다',
+    name: 'presence-anchored',
+    line: 'animationStyle="presence-anchored"',
+  },
   {
     when: '목록이 차례로 도착한다',
     name: 'stagger',
@@ -733,7 +738,7 @@ export const Choose: Story = {
 
         <Preset
           name="press"
-          timing="120ms · standard"
+          timing="120ms · emphasized"
           lead="포인터가 눌리는 순간의 접촉감. 유일하게 property를 안 적어도 되는 프리셋입니다 — 프레스는 언제나 scale이라 기본값이 들어 있습니다."
           code={`<Box
   scale="1"
@@ -805,7 +810,7 @@ export const Choose: Story = {
         <Preset
           name="presence"
           timing="진입 300ms · emphasized / 퇴장 150ms · standard"
-          lead="열리고 닫히는 모든 것. 진입은 읽혀야 하고 퇴장은 이미 결정된 일이라 절반입니다. Menu · Popover · Tooltip · Select · Collapsible · Modal 여섯이 이 하나를 나눠 씁니다."
+          lead="열리고 닫히는 모든 것. 진입은 읽혀야 하고 퇴장은 이미 결정된 일이라 절반입니다. Modal · BottomSheet · Collapsible 은 300 / 150, 트리거에 붙은 Menu · Select · Combobox · Popover · Tooltip 은 presence-anchored 로 200 / 100 입니다."
           code={`<Menu.List animationStyle="presence" />
 
 // 무엇이 움직이는지는 각 recipe의 것이고, presence는 시계만 바꿉니다 —
@@ -819,10 +824,10 @@ export const Choose: Story = {
             <Stack gap={4}>
               <Stack gap={1}>
                 {[
-                  ['Menu', '150 / 100 → 300 / 150'],
-                  ['Popover', '150 / 100 → 300 / 150'],
-                  ['Tooltip', '150 / 150 → 300 / 150'],
-                  ['Select', '150 / 50 → 300 / 150'],
+                  ['Menu', '150 / 100 → 200 / 100 (anchored)'],
+                  ['Popover', '150 / 100 → 200 / 100 (anchored)'],
+                  ['Tooltip', '150 / 150 → 200 / 100 (anchored)'],
+                  ['Select', '150 / 50 → 200 / 100 (anchored)'],
                   ['Collapsible', '200 / 200 → 300 / 150'],
                   ['Modal', '자체 keyframe + presence 시계'],
                 ].map(([name, change]) => (
@@ -956,7 +961,7 @@ export const Choose: Story = {
           lead="한 요소 안에서 속성마다 다른 속도가 필요할 때만. Button은 프레스가 120ms인데 색은 150ms라 duration 하나로 표현이 안 됩니다. composite가 주는 것은 동작 줄이기 가드 하나뿐이고, 값은 반드시 토큰 var()로 적으세요."
           code={`// Button.styles.ts
 export const buttonTransition = [
-  'scale            var(--chakra-durations-motion-press) var(--chakra-easings-standard)',
+  'scale            var(--chakra-durations-motion-press) var(--chakra-easings-emphasized)',
   'background-color var(--chakra-durations-fast)         var(--chakra-easings-standard)',
 ].join(', ');
 
@@ -1087,7 +1092,8 @@ const OURS = [
 
 const CHAKRAS = [
   { name: 'fast', ms: 150, use: 'feedback 프리셋 · presence 퇴장' },
-  { name: 'moderate', ms: 200, use: '200ms가 필요하면 이걸 쓰세요' },
+  { name: 'faster', ms: 100, use: 'presence-anchored 퇴장' },
+  { name: 'moderate', ms: 200, use: 'presence-anchored 진입' },
   { name: 'slow', ms: 300, use: '⚠️ 우리 motion.slow(500ms)와 다른 값' },
   { name: 'slower', ms: 400, use: '⚠️ 우리 motion.slower(700ms)와 다른 값' },
 ];
@@ -1097,13 +1103,13 @@ const CURVES = [
     name: 'standard',
     d: 'M0,100 C40,100 20,0 100,0',
     half: '50%',
-    use: 'press · feedback · presence 퇴장',
+    use: 'feedback',
   },
   {
     name: 'emphasized',
     d: 'M0,100 C22,0 36,0 100,0',
     half: '96%',
-    use: 'travel · presence 진입',
+    use: 'press · travel · presence 진입·퇴장',
   },
   {
     name: 'overshoot',

package/src/theme/animationStyles.test.ts

@@ -106,7 +106,7 @@ describe('motion vocabulary', () => {
     const d = (n: string) => `var(--chakra-durations-${n})`;
     const e = (n: string) => `var(--chakra-easings-${n})`;
 
-    expect(timing('press')).toEqual([d('motion-press'), e('standard')]);
+    expect(timing('press')).toEqual([d('motion-press'), e('emphasized')]);
     expect(timing('feedback')).toEqual([d('fast'), e('standard')]);
     expect(timing('travel')).toEqual([d('motion-base'), e('emphasized')]);
     expect(timing('spring')).toEqual([d('motion-base'), e('overshoot')]);
@@ -133,11 +133,12 @@ describe('the enter/exit policy', () => {
     // A guard on the guard: if the condition Chakra emits for `_open` ever
     // changes spelling, `withOpen` silently empties and every assertion below
     // passes over nothing.
-    // `presence` is the only global preset with an open state — the Modal now
-    // carries its own two keyframe names and borrows this clock. The walk stays
-    // a walk rather than an assertion about `presence` alone, so the next
-    // preset with an `_open` branch is covered the day it is written.
-    expect(withOpen).toEqual(['presence']);
+    // `presence` and its shorter anchored twin are the only global presets
+    // with an open state — the Modal carries its own two keyframe names and
+    // borrows the `presence` clock. The walk stays a walk rather than an
+    // assertion about these two alone, so the next preset with an `_open`
+    // branch is covered the day it is written.
+    expect(withOpen).toEqual(['presence', 'presence-anchored']);
   });
 
   it('never declares an enter without the matching exit', () => {
@@ -162,8 +163,23 @@ describe('the enter/exit policy', () => {
     // The reason one preset can sit on a menu that slides, a popover that
     // scales and a collapsible that interpolates a measured height. A name here
     // would flatten all three into whatever it named.
-    const presence = applied('presence') as Css;
-    expect(presence[OPEN].animationName).toBeUndefined();
-    expect(presence[CLOSED].animationName).toBeUndefined();
+    withOpen.forEach((name) => {
+      const css = applied(name) as Css;
+      expect(css[OPEN].animationName, name).toBeUndefined();
+      expect(css[CLOSED].animationName, name).toBeUndefined();
+    });
+  });
+
+  it('opens anchored popups faster than dialogs, on the same curves', () => {
+    const full = applied('presence') as Css;
+    const anchored = applied('presence-anchored') as Css;
+    expect(DURATION_MS[anchored[OPEN].animationDuration]).toBe(200);
+    expect(DURATION_MS[anchored[CLOSED].animationDuration]).toBe(100);
+    expect(anchored[OPEN].animationTimingFunction).toBe(
+      full[OPEN].animationTimingFunction
+    );
+    expect(anchored[CLOSED].animationTimingFunction).toBe(
+      full[CLOSED].animationTimingFunction
+    );
   });
 });

package/src/theme/claude.md

@@ -54,10 +54,11 @@ it never knows *what* moves, so `transitionProperty` stays at the call site.
 | `travel` | Something moving to a new position or size |
 | `spring` | A physical flip, or two things crossing |
 | `presence` | A part with **both** an open and a closed state |
+| `presence-anchored` | The same, for a popup anchored to a trigger (Menu, Select, Combobox, Popover, Tooltip) |
 | `stagger` | Siblings arriving in sequence (with `staggerProps(index)`) |
 | `composite` | Escape hatch — one element needing two different clocks |
 
-**Seven is the whole list and that is policy.** A motion with one caller belongs
+**Eight is the whole list and that is policy.** A motion with one caller belongs
 next to that caller, not here (see `Spinner.styles.ts`, `Checkbox.styles.ts`).
 Adding an eighth needs two real call sites that the existing seven cannot
 express.
@@ -71,7 +72,8 @@ them:
   default fails invisibly.
 - **`prefers-reduced-motion`** is handled. Loops are the exception and slow down
   rather than stopping — a frozen spinner reads as a dead request.
-- **Enter is 300ms, exit is 150ms** for `presence`, enforced by a test.
+- **Enter is 300ms, exit is 150ms** for `presence` (Modal, BottomSheet,
+  Collapsible) and **200ms / 100ms** for `presence-anchored`, enforced by a test.
 
 Three things `animationStyle` accepts and should never be given — all three
 compile, and all three are caught by lint instead of by types, because Chakra

package/src/theme/index.ts

@@ -9,6 +9,7 @@ import {
 import { colors, semanticTokens } from './colors';
 import { globalCss } from './global';
 import { animationStyles, durations, easings, keyframes } from './motion';
+import { accordionSlotRecipe } from './recipes/accordion';
 import { tableSlotRecipe } from './recipes/table';
 
 /**
@@ -333,6 +334,7 @@ const config = defineConfig({
       textarea: formControlLgOverride,
     },
     slotRecipes: {
+      accordion: accordionSlotRecipe,
       table: tableSlotRecipe,
       select: selectSlotRecipe,
     },