paris 0.22.1 → 0.22.2

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # paris
 
+## 0.22.2
+
+### Patch Changes
+
+- 5173ecf: Fix scroll snap when collapsing `Accordion` and `AccordionSelect` inside a scrollable parent.
+
+  When the dropdown was opened, the user scrolled past it, and then closed it,
+  the scrollable ancestor would instantly snap to the position it would occupy
+  once the dropdown was fully closed — while the visual collapse animation was
+  still running. The cause was framer-motion's `height: 'auto' → 0` exit
+  animation thrashing the layout in the first paint frame, which the browser
+  responded to by clamping `scrollTop`.
+
+  The collapse animation now uses the CSS grid-rows trick (`grid-template-rows:
+1fr` → `0fr`) instead. Layout stays stable across the entire transition, so
+  `scrollTop` clamps smoothly in step with the animation. Duration and easing
+  match the previous behavior (800ms, `cubic-bezier(0.87, 0, 0.13, 1)`).
+
+  One small behavior change: collapsed content remains in the DOM (it was
+  previously unmounted by `AnimatePresence`). The container is marked
+  `aria-hidden` when closed and option buttons receive `tabIndex={-1}`, so
+  screen readers and keyboard navigation continue to skip hidden content.
+
+- 5173ecf: Update runtime dependencies to current semver-compatible versions and patch
+  security advisories. Notable bumps: Tiptap 3.22 → 3.23, Framer Motion 12.24
+  → 12.40, Headless UI 2.2.4 → 2.2.10, Ariakit 0.4.20 → 0.4.28, react-hot-toast
+  2.4 → 2.6, lucide-react 1.7 → 1.16, ts-deepmerge 6.0 → 6.2. No API changes
+  expected, but consumers will pick up the newer transitives on install.
+- 5173ecf: `<Text fontStyle="italic">` is now reliably italic. Mirror the pattern already
+  used by weight classes and apply `!important` to `.fontStyle-*` rules.
+  Without it, the per-kind typography classes (e.g. `.paragraphSmall { font-style: normal }`,
+  emitted when consumers define per-style `font-style` theme variables) win
+  over `.fontStyle-italic` and suppress italic on `<Text>` and anything that
+  delegates to it — notably `<Markdown>` rendering `<em>`.
+
 ## 0.22.1
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
     "name": "paris",
     "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
     "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-    "version": "0.22.1",
+    "version": "0.22.2",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {
@@ -85,38 +85,38 @@
         "./utility": "./src/stories/utility/index.ts"
     },
     "dependencies": {
-        "@ariakit/react": "^0.4.20",
+        "@ariakit/react": "^0.4.28",
         "@emotion/is-prop-valid": "^1.4.0",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
         "@fortawesome/free-regular-svg-icons": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
-        "@fortawesome/react-fontawesome": "^0.2.2",
-        "@headlessui/react": "^2.2.4",
+        "@fortawesome/react-fontawesome": "^0.2.6",
+        "@headlessui/react": "^2.2.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@tiptap/extension-image": "^3.22.2",
-        "@tiptap/extension-link": "^3.22.2",
-        "@tiptap/extension-placeholder": "^3.22.2",
-        "@tiptap/extension-table": "^3.22.2",
-        "@tiptap/extension-table-cell": "^3.22.2",
-        "@tiptap/extension-table-header": "^3.22.2",
-        "@tiptap/extension-table-row": "^3.22.2",
-        "@tiptap/extension-task-item": "^3.22.2",
-        "@tiptap/extension-task-list": "^3.22.2",
-        "@tiptap/markdown": "^3.22.2",
-        "@tiptap/react": "^3.22.2",
-        "@tiptap/starter-kit": "^3.22.2",
+        "@tiptap/extension-image": "^3.23.6",
+        "@tiptap/extension-link": "^3.23.6",
+        "@tiptap/extension-placeholder": "^3.23.6",
+        "@tiptap/extension-table": "^3.23.6",
+        "@tiptap/extension-table-cell": "^3.23.6",
+        "@tiptap/extension-table-header": "^3.23.6",
+        "@tiptap/extension-table-row": "^3.23.6",
+        "@tiptap/extension-task-item": "^3.23.6",
+        "@tiptap/extension-task-list": "^3.23.6",
+        "@tiptap/markdown": "^3.23.6",
+        "@tiptap/react": "^3.23.6",
+        "@tiptap/starter-kit": "^3.23.6",
         "clsx": "^1.2.1",
         "font-color-contrast": "^11.1.0",
-        "framer-motion": "^12.24.10",
-        "lucide-react": "^1.7.0",
+        "framer-motion": "^12.40.0",
+        "lucide-react": "^1.16.0",
         "pte": "^0.5.0",
-        "react-hot-toast": "^2.4.1",
+        "react-hot-toast": "^2.6.0",
         "react-markdown": "^10.1.0",
         "react-tiny-popover": "^8.1.6",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
-        "ts-deepmerge": "^6.0.3"
+        "ts-deepmerge": "^6.2.1"
     },
     "peerDependencies": {
         "@types/react": "^19",
@@ -127,10 +127,10 @@
         "typescript": "^5.0"
     },
     "devDependencies": {
-        "@biomejs/biome": "^2.0.6",
-        "@changesets/cli": "^2.26.1",
-        "@commitlint/cli": "^19.8.1",
-        "@commitlint/config-conventional": "^19.8.1",
+        "@biomejs/biome": "^2.4.15",
+        "@changesets/cli": "^2.31.0",
+        "@commitlint/cli": "^21",
+        "@commitlint/config-conventional": "^21",
         "@ssh/csstypes": "^1.1.0",
         "@storybook/addon-docs": "10.3.4",
         "@storybook/addon-links": "10.3.4",
@@ -139,32 +139,31 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^22.0.0",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/node": "^22.19.19",
+        "@types/react": "^19.2.15",
+        "@types/react-dom": "^19.2.3",
         "@vitest/browser-playwright": "4.1.2",
-        "@vitest/coverage-v8": "^4.1.2",
-        "autoprefixer": "^10.4.14",
+        "@vitest/coverage-v8": "^4.1.7",
+        "autoprefixer": "^10.5.0",
         "change-case": "^4.1.2",
-        "csstype": "^3.1.2",
-        "esbuild-sass-plugin": "^2.16.0",
-        "jsdom": "^29.0.1",
+        "csstype": "^3.2.3",
+        "jsdom": "^29.1.1",
         "jss": "^10.10.0",
         "jss-preset-default": "^10.10.0",
-        "lefthook": "^1.11.13",
-        "next": "^16.2.2",
-        "playwright": "^1.59.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "sass": "^1.62.1",
+        "lefthook": "^1.13.6",
+        "next": "^16.2.6",
+        "playwright": "^1.60.0",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+        "sass": "^1.100.0",
         "storybook": "10.3.4",
         "storybook-dark-mode": "^5.0.0",
         "title-case": "^3.0.3",
-        "ts-node": "^10.9.1",
-        "tsup": "^7.2.0",
-        "type-fest": "^3.10.0",
-        "typescript": "^5.2.2",
-        "vite": "^7.0.0",
-        "vitest": "^4.1.2"
+        "ts-node": "^10.9.2",
+        "tsup": "^8",
+        "type-fest": "^3.13.1",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.3",
+        "vitest": "^4.1.7"
     }
 }

package/src/stories/accordion/Accordion.module.scss

@@ -39,8 +39,23 @@
     }
 
     .dropdown {
-        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
         cursor: auto;
+        transition:
+            grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
+            opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
+
+        &.open {
+            grid-template-rows: 1fr;
+            opacity: 1;
+        }
+    }
+
+    .dropdownClip {
+        min-height: 0;
+        overflow: hidden;
     }
 
     .dropdownContent {
@@ -100,8 +115,23 @@
     }
 
     .dropdown {
-        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
         cursor: auto;
+        transition:
+            grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
+            opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
+
+        &.open {
+            grid-template-rows: 1fr;
+            opacity: 1;
+        }
+    }
+
+    .dropdownClip {
+        min-height: 0;
+        overflow: hidden;
     }
 
     .dropdownContent {

package/src/stories/accordion/Accordion.test.tsx

@@ -9,7 +9,9 @@ describe('Accordion', () => {
 
     it('does not show children when collapsed', () => {
         render(<Accordion title="Title">Hidden content</Accordion>);
-        expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+        // Content is in the DOM but hidden via aria-hidden on the collapsed dropdown
+        const content = screen.getByText('Hidden content');
+        expect(content.closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
     });
 
     it('expands on click to reveal children', async () => {
@@ -26,9 +28,9 @@ describe('Accordion', () => {
         expect(screen.getByText('Toggle content')).toBeInTheDocument();
 
         await user.click(button);
-        // AnimatePresence exit animation may keep element mounted briefly
         await waitFor(() => {
-            expect(screen.queryByText('Toggle content')).not.toBeInTheDocument();
+            const content = screen.getByText('Toggle content');
+            expect(content.closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
         });
     });
 
@@ -69,7 +71,7 @@ describe('Accordion', () => {
             </Accordion>,
         );
 
-        expect(screen.queryByText('Controlled content')).not.toBeInTheDocument();
+        expect(screen.getByText('Controlled content').closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
 
         // Open externally
         rerender(
@@ -77,7 +79,7 @@ describe('Accordion', () => {
                 Controlled content
             </Accordion>,
         );
-        expect(screen.getByText('Controlled content')).toBeInTheDocument();
+        expect(screen.getByText('Controlled content').closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'false');
 
         // Click should call onOpenChange but not change state (controlled)
         await user.click(screen.getByRole('button'));

package/src/stories/accordion/Accordion.tsx

@@ -1,8 +1,6 @@
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
-import type { MotionProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { useState } from 'react';
 import { ChevronRight, Icon } from '../icon';
@@ -31,7 +29,7 @@ export type AccordionProps = {
     overrides?: {
         container?: ComponentPropsWithoutRef<'div'>;
         titleContainer?: ComponentPropsWithoutRef<'div'>;
-        dropdownContainer?: ComponentPropsWithoutRef<'div'> & MotionProps;
+        dropdownContainer?: ComponentPropsWithoutRef<'div'>;
         dropdownContent?: ComponentPropsWithoutRef<'div'>;
     };
 };
@@ -107,37 +105,34 @@ export const Accordion: FC<AccordionProps> = ({
                     <Icon icon={ChevronRight} size={16} className={clsx(styles.chevron, open && styles.open)} />
                 )}
             </div>
-            <AnimatePresence>
-                {open && (
-                    <motion.div
-                        key="content"
-                        initial="collapsed"
-                        animate="open"
-                        exit="collapsed"
-                        variants={{
-                            open: { opacity: 1, height: 'auto', y: 0 },
-                            collapsed: { opacity: 0, height: 0, y: -10 },
-                        }}
-                        transition={{
-                            duration: 0.8,
-                            ease: [0.87, 0, 0.13, 1],
-                        }}
-                        {...overrides?.dropdownContainer}
-                        className={clsx(styles.dropdown, overrides?.dropdownContainer?.className)}
+            {/*
+             * Collapse uses the CSS grid-rows trick (`1fr` → `0fr`) instead of
+             * animating `height: auto` via JS. JS height-auto animations flash an
+             * intermediate layout state on open/close that causes scrollable
+             * ancestors to clamp `scrollTop` to 0 in the first paint frame — a
+             * visible scroll-snap before the animation starts.
+             */}
+            <div
+                aria-hidden={!open}
+                {...overrides?.dropdownContainer}
+                className={clsx(styles.dropdown, open && styles.open, overrides?.dropdownContainer?.className)}
+            >
+                {/*
+                 * dropdownClip is the grid item. It owns `min-height: 0` and
+                 * `overflow: hidden` so the parent's `grid-template-rows: 0fr`
+                 * can fully collapse to 0 height. Padding/background-color
+                 * stay on .dropdownContent (one level deeper) so they don't
+                 * extend the grid item's box when closed.
+                 */}
+                <div className={styles.dropdownClip}>
+                    <div
+                        {...overrides?.dropdownContent}
+                        className={clsx(styles.dropdownContent, styles[size], overrides?.dropdownContent?.className)}
                     >
-                        <div
-                            {...overrides?.dropdownContent}
-                            className={clsx(
-                                styles.dropdownContent,
-                                styles[size],
-                                overrides?.dropdownContent?.className,
-                            )}
-                        >
-                            <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+                        <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };

package/src/stories/accordionselect/AccordionSelect.module.scss

@@ -53,10 +53,22 @@
 }
 
 .dropdown {
-    overflow: hidden;
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+        grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
+        opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
+
+    &.open {
+        grid-template-rows: 1fr;
+        opacity: 1;
+    }
 }
 
 .dropdownContent {
+    min-height: 0;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     padding: 0;

package/src/stories/accordionselect/AccordionSelect.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { render, screen, waitFor } from '../../test/render';
+import { render, screen, waitFor, within } from '../../test/render';
 import type { AccordionSelectOption } from './AccordionSelect';
 import { AccordionSelect } from './AccordionSelect';
 
@@ -38,7 +38,8 @@ describe('AccordionSelect', () => {
 
     it('displays the selected option in the header', () => {
         render(<AccordionSelect options={options} value="champagne" />);
-        expect(screen.getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
+        // Option text also appears in the collapsed-but-mounted dropdown list, so scope to the header
+        expect(within(screen.getByRole('button')).getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
     });
 
     it('expands to show all options when header is clicked', async () => {
@@ -253,7 +254,9 @@ describe('AccordionSelect', () => {
     describe('uncontrolled selection', () => {
         it('renders with defaultValue', () => {
             render(<AccordionSelect options={options} defaultValue="champagne" />);
-            expect(screen.getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
+            expect(
+                within(screen.getByRole('button')).getByText('In an alleyway, drinking champagne'),
+            ).toBeInTheDocument();
         });
 
         it('renders with placeholder when no defaultValue', () => {

package/src/stories/accordionselect/AccordionSelect.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
 import { useControllableState } from '../../helpers/useControllableState';
@@ -195,60 +194,56 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
                 </div>
             </div>
 
-            <AnimatePresence>
-                {open && (
-                    <motion.div
-                        key="content"
-                        initial="collapsed"
-                        animate="open"
-                        exit="collapsed"
-                        variants={{
-                            open: { opacity: 1, height: 'auto' },
-                            collapsed: { opacity: 0, height: 0 },
-                        }}
-                        transition={{
-                            duration: 0.8,
-                            ease: [0.87, 0, 0.13, 1],
-                        }}
-                        className={clsx(styles.dropdown, overrides?.dropdown?.className)}
-                    >
-                        <div
-                            {...overrides?.dropdownContent}
-                            className={clsx(styles.dropdownContent, overrides?.dropdownContent?.className)}
-                        >
-                            {options.map((option) => {
-                                const isOptionSelected = option.id === resolvedValue;
-                                return (
-                                    <button
-                                        key={option.id}
-                                        type="button"
-                                        disabled={option.disabled}
-                                        data-selected={isOptionSelected}
-                                        {...overrides?.option}
-                                        className={clsx(styles.option, overrides?.option?.className)}
-                                        onClick={() => {
-                                            setResolvedValue(option.id);
-                                            if (closeOnSelect) setOpen(false);
-                                        }}
-                                    >
-                                        <div className={styles.optionContent}>
-                                            {renderOption ? (
-                                                renderOption(option, isOptionSelected)
-                                            ) : (
-                                                <TextWhenString kind="paragraphXSmall" weight="medium">
-                                                    {option.node}
-                                                </TextWhenString>
-                                            )}
-                                        </div>
-                                        {isOptionSelected && <Icon icon={Check} size={13} className={styles.check} />}
-                                    </button>
-                                );
-                            })}
-                            {action}
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+            {/*
+             * Collapse animation uses the CSS grid-rows trick (`1fr` → `0fr`) instead
+             * of animating `height: auto`. JS-driven height-auto animations (e.g.
+             * framer-motion) flash an intermediate layout state on open/close that
+             * causes scrollable ancestors to clamp `scrollTop` to 0 in the first
+             * paint frame — visible as an instant scroll snap before the animation
+             * starts. The grid-rows approach keeps the layout stable across the
+             * entire transition.
+             */}
+            <div
+                {...overrides?.dropdown}
+                aria-hidden={!open}
+                className={clsx(styles.dropdown, open && styles.open, overrides?.dropdown?.className)}
+            >
+                <div
+                    {...overrides?.dropdownContent}
+                    className={clsx(styles.dropdownContent, overrides?.dropdownContent?.className)}
+                >
+                    {options.map((option) => {
+                        const isOptionSelected = option.id === resolvedValue;
+                        return (
+                            <button
+                                key={option.id}
+                                type="button"
+                                disabled={option.disabled || !open}
+                                tabIndex={open ? undefined : -1}
+                                data-selected={isOptionSelected}
+                                {...overrides?.option}
+                                className={clsx(styles.option, overrides?.option?.className)}
+                                onClick={() => {
+                                    setResolvedValue(option.id);
+                                    if (closeOnSelect) setOpen(false);
+                                }}
+                            >
+                                <div className={styles.optionContent}>
+                                    {renderOption ? (
+                                        renderOption(option, isOptionSelected)
+                                    ) : (
+                                        <TextWhenString kind="paragraphXSmall" weight="medium">
+                                            {option.node}
+                                        </TextWhenString>
+                                    )}
+                                </div>
+                                {isOptionSelected && <Icon icon={Check} size={13} className={styles.check} />}
+                            </button>
+                        );
+                    })}
+                    {action}
+                </div>
+            </div>
         </div>
     );
 };

package/src/stories/text/Text.module.scss

@@ -34,6 +34,6 @@ $font-styles: (
 @each $style-name,
 $style-value in $font-styles {
     .fontStyle-#{$style-name} {
-        font-style: $style-value;
+        font-style: $style-value !important;
     }
 }