@wallarm-org/design-system 3.2.0-rc-feat-app-shell-aside.2 → 3.2.0

package/dist/components/AppShell/AppShell.js

@@ -15,7 +15,7 @@ const ASIDE_MOTION = {
     "--app-shell-aside-ease": ASIDE_SLIDE_EASE
 };
 const AppShell = (t0)=>{
-    const $ = c(52);
+    const $ = c(54);
     let appearedProp;
     let children;
     let className;
@@ -24,10 +24,11 @@ const AppShell = (t0)=>{
     let props;
     let ref;
     let reveal;
+    let style;
     let t1;
     let testId;
     if ($[0] !== t0) {
-        ({ ref, className, children, reveal, expandFrom, onRevealed, appeared: appearedProp, ambient: t1, "data-testid": testId, ...props } = t0);
+        ({ ref, className, children, reveal, expandFrom, onRevealed, appeared: appearedProp, ambient: t1, style, "data-testid": testId, ...props } = t0);
         $[0] = t0;
         $[1] = appearedProp;
         $[2] = children;
@@ -37,8 +38,9 @@ const AppShell = (t0)=>{
         $[6] = props;
         $[7] = ref;
         $[8] = reveal;
-        $[9] = t1;
-        $[10] = testId;
+        $[9] = style;
+        $[10] = t1;
+        $[11] = testId;
     } else {
         appearedProp = $[1];
         children = $[2];
@@ -48,90 +50,93 @@ const AppShell = (t0)=>{
         props = $[6];
         ref = $[7];
         reveal = $[8];
-        t1 = $[9];
-        testId = $[10];
+        style = $[9];
+        t1 = $[10];
+        testId = $[11];
     }
     const ambient = void 0 === t1 ? true : t1;
     const internalRef = useRef(null);
     let t2;
-    if ($[11] !== appearedProp || $[12] !== expandFrom || $[13] !== onRevealed || $[14] !== reveal) {
+    if ($[12] !== appearedProp || $[13] !== expandFrom || $[14] !== onRevealed || $[15] !== reveal) {
         t2 = {
             reveal,
             expandFrom,
             onRevealed,
             appearedProp
         };
-        $[11] = appearedProp;
-        $[12] = expandFrom;
-        $[13] = onRevealed;
-        $[14] = reveal;
-        $[15] = t2;
-    } else t2 = $[15];
+        $[12] = appearedProp;
+        $[13] = expandFrom;
+        $[14] = onRevealed;
+        $[15] = reveal;
+        $[16] = t2;
+    } else t2 = $[16];
     const { phase, targetRect, expandStyle, appeared, handleRevealOverlayTransitionEnd, handleExpandTransitionEnd } = useShellAnimation(internalRef, t2);
     let t3;
-    if ($[16] !== appeared) {
+    if ($[17] !== appeared) {
         t3 = {
             appeared
         };
-        $[16] = appeared;
-        $[17] = t3;
-    } else t3 = $[17];
+        $[17] = appeared;
+        $[18] = t3;
+    } else t3 = $[18];
     const shellContext = t3;
     let t4;
-    if ($[18] !== ref) {
+    if ($[19] !== ref) {
         t4 = composeRefs(internalRef, ref);
-        $[18] = ref;
-        $[19] = t4;
-    } else t4 = $[19];
+        $[19] = ref;
+        $[20] = t4;
+    } else t4 = $[20];
     let t5;
-    if ($[20] !== className) {
-        t5 = cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"header_header_header""rail_remote_aside"] [grid-template-columns:auto_1fr_0px] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', "[--app-shell-aside-width:--spacing(480)]", "has-[>[data-slot=app-shell-aside][data-state=open]]:[grid-template-columns:auto_1fr_calc(var(--app-shell-aside-width)+var(--spacing-8)*2)] has-[>[data-slot=app-shell-aside]]:overflow-x-clip", "transition-[grid-template-columns] duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
-        $[20] = className;
-        $[21] = t5;
-    } else t5 = $[21];
+    if ($[21] !== className) {
+        t5 = cn('relative isolate grid h-screen overscroll-none [grid-template-areas:"header_header""rail_remote"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', "[--app-shell-aside-width:--spacing(480)]", 'has-[>[data-slot=app-shell-aside]]:[grid-template-areas:"header_header_header""rail_remote_aside"] has-[>[data-slot=app-shell-aside]]:[grid-template-columns:auto_1fr_0px] has-[>[data-slot=app-shell-aside]]:overflow-x-clip', "has-[>[data-slot=app-shell-aside][data-state=open]]:[grid-template-columns:auto_1fr_calc(var(--app-shell-aside-width)+var(--spacing-8)*2)]", "transition-[grid-template-columns] duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
+        $[21] = className;
+        $[22] = t5;
+    } else t5 = $[22];
     let t6;
-    if ($[22] !== expandStyle) {
+    if ($[23] !== expandStyle || $[24] !== style) {
         t6 = {
             ...ASIDE_MOTION,
+            ...style,
             ...expandStyle
         };
-        $[22] = expandStyle;
-        $[23] = t6;
-    } else t6 = $[23];
+        $[23] = expandStyle;
+        $[24] = style;
+        $[25] = t6;
+    } else t6 = $[25];
     const t7 = expandFrom ? handleExpandTransitionEnd : void 0;
     let t8;
-    if ($[24] !== ambient) {
+    if ($[26] !== ambient) {
         t8 = ambient && /*#__PURE__*/ jsx(AppShellAmbient, {});
-        $[24] = ambient;
-        $[25] = t8;
-    } else t8 = $[25];
+        $[26] = ambient;
+        $[27] = t8;
+    } else t8 = $[27];
     let t9;
-    if ($[26] !== expandFrom || $[27] !== phase || $[28] !== targetRect) {
+    if ($[28] !== expandFrom || $[29] !== phase || $[30] !== targetRect) {
         t9 = expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
             phase: phase,
             expandFrom: expandFrom,
             targetRect: targetRect
         });
-        $[26] = expandFrom;
-        $[27] = phase;
-        $[28] = targetRect;
-        $[29] = t9;
-    } else t9 = $[29];
+        $[28] = expandFrom;
+        $[29] = phase;
+        $[30] = targetRect;
+        $[31] = t9;
+    } else t9 = $[31];
     let t10;
-    if ($[30] !== expandFrom || $[31] !== handleRevealOverlayTransitionEnd || $[32] !== phase || $[33] !== targetRect) {
+    if ($[32] !== expandFrom || $[33] !== handleRevealOverlayTransitionEnd || $[34] !== phase || $[35] !== targetRect) {
         t10 = !expandFrom && /*#__PURE__*/ jsx(RevealOverlay, {
             phase: phase,
             targetRect: targetRect,
             onTransitionEnd: handleRevealOverlayTransitionEnd
         });
-        $[30] = expandFrom;
-        $[31] = handleRevealOverlayTransitionEnd;
-        $[32] = phase;
-        $[33] = targetRect;
-        $[34] = t10;
-    } else t10 = $[34];
+        $[32] = expandFrom;
+        $[33] = handleRevealOverlayTransitionEnd;
+        $[34] = phase;
+        $[35] = targetRect;
+        $[36] = t10;
+    } else t10 = $[36];
     let t11;
-    if ($[35] !== children || $[36] !== props || $[37] !== t10 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 || $[44] !== testId) {
+    if ($[37] !== children || $[38] !== props || $[39] !== t10 || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 || $[43] !== t7 || $[44] !== t8 || $[45] !== t9 || $[46] !== testId) {
         t11 = /*#__PURE__*/ jsxs("div", {
             ...props,
             ref: t4,
@@ -147,38 +152,38 @@ const AppShell = (t0)=>{
                 t10
             ]
         });
-        $[35] = children;
-        $[36] = props;
-        $[37] = t10;
-        $[38] = t4;
-        $[39] = t5;
-        $[40] = t6;
-        $[41] = t7;
-        $[42] = t8;
-        $[43] = t9;
-        $[44] = testId;
-        $[45] = t11;
-    } else t11 = $[45];
+        $[37] = children;
+        $[38] = props;
+        $[39] = t10;
+        $[40] = t4;
+        $[41] = t5;
+        $[42] = t6;
+        $[43] = t7;
+        $[44] = t8;
+        $[45] = t9;
+        $[46] = testId;
+        $[47] = t11;
+    } else t11 = $[47];
     let t12;
-    if ($[46] !== shellContext || $[47] !== t11) {
+    if ($[48] !== shellContext || $[49] !== t11) {
         t12 = /*#__PURE__*/ jsx(AppShellContext.Provider, {
             value: shellContext,
             children: t11
         });
-        $[46] = shellContext;
-        $[47] = t11;
-        $[48] = t12;
-    } else t12 = $[48];
+        $[48] = shellContext;
+        $[49] = t11;
+        $[50] = t12;
+    } else t12 = $[50];
     let t13;
-    if ($[49] !== t12 || $[50] !== testId) {
+    if ($[51] !== t12 || $[52] !== testId) {
         t13 = /*#__PURE__*/ jsx(TestIdProvider, {
             value: testId,
             children: t12
         });
-        $[49] = t12;
-        $[50] = testId;
-        $[51] = t13;
-    } else t13 = $[51];
+        $[51] = t12;
+        $[52] = testId;
+        $[53] = t13;
+    } else t13 = $[53];
     return t13;
 };
 AppShell.displayName = "AppShell";

package/dist/components/AppShell/AppShellAside.d.ts

@@ -3,23 +3,31 @@ export interface AppShellAsideProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     /**
      * Shows the panel, sliding it in from the right as the canvas narrows. Closing makes it
-     * `hidden` and `inert` at once and slides it back out, after which it takes no space; under
-     * reduced motion both are instant. Its children stay mounted throughout, so whatever state
-     * they hold survives a close and reopen.
+     * `hidden` and `inert` at once while the column slides shut, after which it takes no space.
+     * The panel stays painted through that slide only where `display` can transition
+     * (`transition-behavior: allow-discrete`: Chromium, WebKit); in Firefox it hides at once while
+     * the column still closes smoothly. Under reduced motion both directions are instant. Its
+     * children stay mounted throughout, so whatever state they hold survives a close and reopen.
      */
     open: boolean;
     children?: ReactNode;
 }
 /**
  * A panel docked right of the content surface, in the shell's `aside` grid area. Render it
- * after `AppShellRemote`: while it is open, the remote turns into a card beside it.
+ * after `AppShellRemote`: while it is open, the remote turns into a card beside it. Keep it
+ * rendered while closed, too: the slide runs between its closed and open states, so an aside
+ * that mounts already open simply appears.
  *
  * It is 480px wide. To change that, set `--app-shell-aside-width` on the `AppShell` (for example
- * `className='[--app-shell-aside-width:400px]'`), not a width class here: the shell sizes its
- * track from the same variable.
+ * `className='[--app-shell-aside-width:400px]'`) rather than a width or margin class here: the
+ * shell sizes its track from that variable and the panel's spacing-8 margins.
  *
- * Desktop-first: while it is open the shell needs room for the rail plus the panel. In a
- * narrower window the right end (the panel and the header's last actions) is clipped rather
- * than scrolled to, so keep a min-width on the host or close the panel on narrow viewports.
+ * Closing while focus is inside the panel makes it inert, which drops focus to the document, so
+ * move focus first — for example back to the toggle that opened it, as the story does.
+ *
+ * Desktop-first: whenever an aside is composed, the shell clips horizontal overflow instead of
+ * scrolling. While the panel is open the shell needs room for the rail plus the panel, so in a
+ * narrower window the right end (the panel and the header's last actions) is cut off; keep a
+ * min-width on the host or close the panel on narrow viewports.
  */
 export declare const AppShellAside: FC<AppShellAsideProps>;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "3.1.0",
-  "generatedAt": "2026-10-21T13:45:39.845Z",
+  "generatedAt": "2026-10-21T16:04:37.661Z",
   "components": [
     {
       "name": "Accordion",
@@ -4519,7 +4519,7 @@
               "name": "open",
               "type": "boolean",
               "required": true,
-              "description": "Shows the panel, sliding it in from the right as the canvas narrows. Closing makes it\n`hidden` and `inert` at once and slides it back out, after which it takes no space; under\nreduced motion both are instant. Its children stay mounted throughout, so whatever state\nthey hold survives a close and reopen."
+              "description": "Shows the panel, sliding it in from the right as the canvas narrows. Closing makes it\n`hidden` and `inert` at once while the column slides shut, after which it takes no space.\nThe panel stays painted through that slide only where `display` can transition\n(`transition-behavior: allow-discrete`: Chromium, WebKit); in Firefox it hides at once while\nthe column still closes smoothly. Under reduced motion both directions are instant. Its\nchildren stay mounted throughout, so whatever state they hold survives a close and reopen."
             },
             {
               "name": "defaultChecked",
@@ -5633,7 +5633,7 @@
         {
           "name": "WithAside",
           "code": "({ ambient }) => (\n  <StoryRouter>\n    <Shell ambient={ambient} aside />\n  </StoryRouter>\n)",
-          "description": "`AppShellAside` docks a panel right of the content surface — a stand-in assistant here, toggled from the header — that slides in as the canvas narrows and back out on close, hiding the region without unmounting what is inside, so text typed into the panel survives a close and reopen."
+          "description": "`AppShellAside` docks a panel right of the content surface — a stand-in assistant here, toggled from the header — that slides in as the canvas narrows, while closing widens the canvas back and hides the region without unmounting what is inside, so text typed into the panel survives a close and reopen."
         },
         {
           "name": "RevealFlow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "3.2.0-rc-feat-app-shell-aside.2",
+  "version": "3.2.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",