feat(Resizable): resizable takes useResizable's output on LayoutPanel, ResizeHandle and SideNav, and focus leaves a collapsing panel

.changeset/collapsing-panel-moves-focus.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] When a `LayoutPanel` beside a `ResizeHandle` collapses with focus inside it, focus moves to the handle, and the collapsed panel is inert and hidden from assistive technology until it opens, instead of keeping focus, and a Tab stop, in a panel of no width. This holds for a panel that takes a `useResizable` region's `resizable` props, whether the hook's own or a hand-built object, and for a panel at the region's size beside a handle given them. A collapse started from the handle or from outside the panel keeps focus where it is.
+
+@vjeux

.changeset/resizable-takes-hook-output.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] `LayoutPanel`, `ResizeHandle` and `SideNav` take `useResizable`'s output directly in their `resizable` prop: `const resizable = useResizable({…}); <LayoutPanel resizable={resizable}>…</LayoutPanel> <ResizeHandle resizable={resizable} />`. The output's `props` still works, and `SideNav`'s `true` and config object are unchanged. Given the output, `SideNav`'s rail follows the region: its width and collapse state come from the region, its toggle calls the region's `collapse` and `expand`, and the region's `autoSaveId` saves the width. When `collapsible` also sets a collapsed state, the region wins and `SideNav` warns in development. Any other element can use the hook's `size`; the Resizable docs show one sized with a StyleX dynamic style.
+
+@vjeux