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

package/dist/components/AppShell/AppShell.js

@@ -6,11 +6,16 @@ import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { AppShellAmbient } from "./AppShellAmbient.js";
 import { AppShellContext } from "./AppShellContext.js";
+import { ASIDE_SLIDE_EASE, ASIDE_SLIDE_MS } from "./constants.js";
 import { ExpandOverlay } from "./ExpandOverlay.js";
 import { RevealOverlay } from "./RevealOverlay.js";
 import { useShellAnimation } from "./useShellAnimation.js";
+const ASIDE_MOTION = {
+    "--app-shell-aside-duration": `${ASIDE_SLIDE_MS}ms`,
+    "--app-shell-aside-ease": ASIDE_SLIDE_EASE
+};
 const AppShell = (t0)=>{
-    const $ = c(50);
+    const $ = c(52);
     let appearedProp;
     let children;
     let className;
@@ -80,92 +85,101 @@ const AppShell = (t0)=>{
     } else t4 = $[19];
     let t5;
     if ($[20] !== 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', 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];
-    const t6 = expandFrom ? handleExpandTransitionEnd : void 0;
-    let t7;
-    if ($[22] !== ambient) {
-        t7 = ambient && /*#__PURE__*/ jsx(AppShellAmbient, {});
-        $[22] = ambient;
-        $[23] = t7;
-    } else t7 = $[23];
+    let t6;
+    if ($[22] !== expandStyle) {
+        t6 = {
+            ...ASIDE_MOTION,
+            ...expandStyle
+        };
+        $[22] = expandStyle;
+        $[23] = t6;
+    } else t6 = $[23];
+    const t7 = expandFrom ? handleExpandTransitionEnd : void 0;
     let t8;
-    if ($[24] !== expandFrom || $[25] !== phase || $[26] !== targetRect) {
-        t8 = expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
+    if ($[24] !== ambient) {
+        t8 = ambient && /*#__PURE__*/ jsx(AppShellAmbient, {});
+        $[24] = ambient;
+        $[25] = t8;
+    } else t8 = $[25];
+    let t9;
+    if ($[26] !== expandFrom || $[27] !== phase || $[28] !== targetRect) {
+        t9 = expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
             phase: phase,
             expandFrom: expandFrom,
             targetRect: targetRect
         });
-        $[24] = expandFrom;
-        $[25] = phase;
-        $[26] = targetRect;
-        $[27] = t8;
-    } else t8 = $[27];
-    let t9;
-    if ($[28] !== expandFrom || $[29] !== handleRevealOverlayTransitionEnd || $[30] !== phase || $[31] !== targetRect) {
-        t9 = !expandFrom && /*#__PURE__*/ jsx(RevealOverlay, {
+        $[26] = expandFrom;
+        $[27] = phase;
+        $[28] = targetRect;
+        $[29] = t9;
+    } else t9 = $[29];
+    let t10;
+    if ($[30] !== expandFrom || $[31] !== handleRevealOverlayTransitionEnd || $[32] !== phase || $[33] !== targetRect) {
+        t10 = !expandFrom && /*#__PURE__*/ jsx(RevealOverlay, {
             phase: phase,
             targetRect: targetRect,
             onTransitionEnd: handleRevealOverlayTransitionEnd
         });
-        $[28] = expandFrom;
-        $[29] = handleRevealOverlayTransitionEnd;
-        $[30] = phase;
-        $[31] = targetRect;
-        $[32] = t9;
-    } else t9 = $[32];
-    let t10;
-    if ($[33] !== children || $[34] !== expandStyle || $[35] !== props || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9 || $[42] !== testId) {
-        t10 = /*#__PURE__*/ jsxs("div", {
+        $[30] = expandFrom;
+        $[31] = handleRevealOverlayTransitionEnd;
+        $[32] = phase;
+        $[33] = targetRect;
+        $[34] = t10;
+    } else t10 = $[34];
+    let t11;
+    if ($[35] !== children || $[36] !== props || $[37] !== t10 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 || $[44] !== testId) {
+        t11 = /*#__PURE__*/ jsxs("div", {
             ...props,
             ref: t4,
             "data-slot": "app-shell",
             "data-testid": testId,
             className: t5,
-            style: expandStyle,
-            onTransitionEnd: t6,
+            style: t6,
+            onTransitionEnd: t7,
             children: [
-                t7,
-                children,
                 t8,
-                t9
+                children,
+                t9,
+                t10
             ]
         });
-        $[33] = children;
-        $[34] = expandStyle;
-        $[35] = props;
-        $[36] = t4;
-        $[37] = t5;
-        $[38] = t6;
-        $[39] = t7;
-        $[40] = t8;
-        $[41] = t9;
-        $[42] = testId;
-        $[43] = t10;
-    } else t10 = $[43];
-    let t11;
-    if ($[44] !== shellContext || $[45] !== t10) {
-        t11 = /*#__PURE__*/ jsx(AppShellContext.Provider, {
-            value: shellContext,
-            children: t10
-        });
-        $[44] = shellContext;
-        $[45] = t10;
-        $[46] = t11;
-    } else t11 = $[46];
+        $[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];
     let t12;
-    if ($[47] !== t11 || $[48] !== testId) {
-        t12 = /*#__PURE__*/ jsx(TestIdProvider, {
-            value: testId,
+    if ($[46] !== shellContext || $[47] !== t11) {
+        t12 = /*#__PURE__*/ jsx(AppShellContext.Provider, {
+            value: shellContext,
             children: t11
         });
+        $[46] = shellContext;
         $[47] = t11;
-        $[48] = testId;
+        $[48] = t12;
+    } else t12 = $[48];
+    let t13;
+    if ($[49] !== t12 || $[50] !== testId) {
+        t13 = /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: t12
+        });
         $[49] = t12;
-    } else t12 = $[49];
-    return t12;
+        $[50] = testId;
+        $[51] = t13;
+    } else t13 = $[51];
+    return t13;
 };
 AppShell.displayName = "AppShell";
 export { AppShell };

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

@@ -0,0 +1,25 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+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.
+     */
+    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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+export declare const AppShellAside: FC<AppShellAsideProps>;

package/dist/components/AppShell/AppShellAside.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const AppShellAside = (t0)=>{
+    const $ = c(17);
+    let children;
+    let className;
+    let open;
+    let props;
+    let ref;
+    if ($[0] !== t0) {
+        ({ ref, open, className, children, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = open;
+        $[4] = props;
+        $[5] = ref;
+    } else {
+        children = $[1];
+        className = $[2];
+        open = $[3];
+        props = $[4];
+        ref = $[5];
+    }
+    const testId = useTestId("aside");
+    const t1 = !open;
+    const t2 = !open;
+    const t3 = open ? "open" : "closed";
+    let t4;
+    if ($[6] !== className) {
+        t4 = cn("[grid-area:aside] mx-8 mb-8 data-[state=open]:flex w-(--app-shell-aside-width) flex-col overflow-auto overscroll-none rounded-12 border border-border-primary-light bg-bg-page-bg pb-4", "transition-[display] transition-discrete duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
+        $[6] = className;
+        $[7] = t4;
+    } else t4 = $[7];
+    let t5;
+    if ($[8] !== children || $[9] !== props || $[10] !== ref || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== testId) {
+        t5 = /*#__PURE__*/ jsx("aside", {
+            ...props,
+            ref: ref,
+            hidden: t1,
+            inert: t2,
+            "data-slot": "app-shell-aside",
+            "data-state": t3,
+            "data-testid": testId,
+            className: t4,
+            children: children
+        });
+        $[8] = children;
+        $[9] = props;
+        $[10] = ref;
+        $[11] = t1;
+        $[12] = t2;
+        $[13] = t3;
+        $[14] = t4;
+        $[15] = testId;
+        $[16] = t5;
+    } else t5 = $[16];
+    return t5;
+};
+AppShellAside.displayName = "AppShellAside";
+export { AppShellAside };

package/dist/components/AppShell/AppShellRemote.js

@@ -24,7 +24,7 @@ const AppShellRemote = (t0)=>{
     const testId = useTestId("remote");
     let t1;
     if ($[5] !== className) {
-        t1 = cn("[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg", className);
+        t1 = cn("[grid-area:remote] relative overflow-auto overscroll-none rounded-tl-12 border-t border-l border-border-primary-light bg-bg-page-bg", "has-[~[data-slot=app-shell-aside][data-state=open]]:rounded-tr-12 has-[~[data-slot=app-shell-aside][data-state=open]]:border-r", "transition-[border-top-right-radius,border-right-width] duration-(--app-shell-aside-duration) ease-(--app-shell-aside-ease) motion-reduce:transition-none", className);
         $[5] = className;
         $[6] = t1;
     } else t1 = $[6];

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

@@ -4,3 +4,6 @@ export declare const MORPH_MS = 600;
 export declare const EXPAND_MS = 560;
 export declare const EXPAND_BORDER_MS = 400;
 export declare const SKELETON_DELAY = 250;
+/** AppShellAside's slide. Starts on the boot expand's border timing; tune it on its own. */
+export declare const ASIDE_SLIDE_MS = 400;
+export declare const ASIDE_SLIDE_EASE = "cubic-bezier(0.4, 0, 0.2, 1)";

package/dist/components/AppShell/constants.js

@@ -4,4 +4,6 @@ const MORPH_MS = 600;
 const EXPAND_MS = 560;
 const EXPAND_BORDER_MS = 400;
 const SKELETON_DELAY = 250;
-export { EMPHASIZED_DECEL, EXPAND_BORDER_MS, EXPAND_MS, HERO_EASE, MORPH_MS, SKELETON_DELAY };
+const ASIDE_SLIDE_MS = 400;
+const ASIDE_SLIDE_EASE = HERO_EASE;
+export { ASIDE_SLIDE_EASE, ASIDE_SLIDE_MS, EMPHASIZED_DECEL, EXPAND_BORDER_MS, EXPAND_MS, HERO_EASE, MORPH_MS, SKELETON_DELAY };

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

@@ -1,4 +1,5 @@
 export { AppShell, type AppShellExpandFrom, type AppShellProps } from './AppShell.js';
+export { AppShellAside, type AppShellAsideProps } from './AppShellAside.js';
 export { AppShellHeader, type AppShellHeaderProps } from './AppShellHeader.js';
 export { AppShellRail, type AppShellRailProps } from './AppShellRail.js';
 export { AppShellRemote, type AppShellRemoteProps } from './AppShellRemote.js';

package/dist/components/AppShell/index.js

@@ -1,4 +1,5 @@
 export { AppShell } from "./AppShell.js";
+export { AppShellAside } from "./AppShellAside.js";
 export { AppShellHeader } from "./AppShellHeader.js";
 export { AppShellRail } from "./AppShellRail.js";
 export { AppShellRemote } from "./AppShellRemote.js";

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { CalendarDate, CalendarDateTime, getLocalTimeZone, parseDate, parseDateT
 export { Accordion, AccordionActions, type AccordionActionsProps, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionValueChangeDetails, type AccordionVariant, } from './components/Accordion/index.js';
 export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent, type AlertContentProps, AlertControls, type AlertControlsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, } from './components/Alert/index.js';
 export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/AnimatedBackground/index.js';
-export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell/index.js';
+export { AppShell, AppShellAside, type AppShellAsideProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell/index.js';
 export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute/index.js';
 export { Avatar, AvatarContent, type AvatarContentProps, AvatarDescription, type AvatarDescriptionProps, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, AvatarName, type AvatarNameProps, AvatarOverlay, type AvatarOverlayProps, type AvatarProps, type AvatarStatusChangeDetails, } from './components/Avatar/index.js';
 export { Badge, type BadgeProps } from './components/Badge/index.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { CalendarDate, CalendarDateTime, Time, ZonedDateTime, getLocalTimeZone,
 export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordion/index.js";
 export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from "./components/Alert/index.js";
 export { AnimatedBackground } from "./components/AnimatedBackground/index.js";
-export { AppShell, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
+export { AppShell, AppShellAside, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
 export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
 export { Avatar, AvatarContent, AvatarDescription, AvatarFallback, AvatarImage, AvatarName, AvatarOverlay } from "./components/Avatar/index.js";
 export { Badge } from "./components/Badge/index.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.0.0",
-  "generatedAt": "2026-10-20T09:20:56.929Z",
+  "version": "3.1.0",
+  "generatedAt": "2026-10-21T13:45:39.845Z",
   "components": [
     {
       "name": "Accordion",
@@ -4512,6 +4512,287 @@
       ],
       "variants": [],
       "subComponents": [
+        {
+          "name": "AppShellAside",
+          "props": [
+            {
+              "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."
+            },
+            {
+              "name": "defaultChecked",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "defaultValue",
+              "type": "string | number | readonly string[] | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressContentEditableWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "suppressHydrationWarning",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "accessKey",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCapitalize",
+              "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+              "required": false
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "contentEditable",
+              "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+              "required": false
+            },
+            {
+              "name": "contextMenu",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "dir",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "draggable",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "enterKeyHint",
+              "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+              "required": false
+            },
+            {
+              "name": "hidden",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "lang",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "nonce",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "slot",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "spellCheck",
+              "type": "Booleanish | undefined",
+              "required": false
+            },
+            {
+              "name": "tabIndex",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "translate",
+              "type": "\"yes\" | \"no\" | undefined",
+              "required": false
+            },
+            {
+              "name": "radioGroup",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "role",
+              "type": "AriaRole | undefined",
+              "required": false
+            },
+            {
+              "name": "about",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "content",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "datatype",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inlist",
+              "type": "any",
+              "required": false
+            },
+            {
+              "name": "prefix",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "property",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rel",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "resource",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "rev",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "typeof",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "vocab",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoCorrect",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "autoSave",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemProp",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemScope",
+              "type": "boolean | undefined",
+              "required": false
+            },
+            {
+              "name": "itemType",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemID",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "itemRef",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "results",
+              "type": "number | undefined",
+              "required": false
+            },
+            {
+              "name": "security",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "unselectable",
+              "type": "\"off\" | \"on\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popover",
+              "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTargetAction",
+              "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+              "required": false
+            },
+            {
+              "name": "popoverTarget",
+              "type": "string | undefined",
+              "required": false
+            },
+            {
+              "name": "inert",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
+            },
+            {
+              "name": "inputMode",
+              "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+              "required": false,
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+            },
+            {
+              "name": "is",
+              "type": "string | undefined",
+              "required": false,
+              "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+            },
+            {
+              "name": "exportparts",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+            },
+            {
+              "name": "part",
+              "type": "string | undefined",
+              "required": false,
+              "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            }
+          ]
+        },
         {
           "name": "AppShellHeader",
           "props": [
@@ -5349,6 +5630,11 @@
           "code": "({ ambient, loading }) => (\n  <StoryRouter>\n    <Shell ambient={ambient} loading={loading} simulateProductLoading />\n  </StoryRouter>\n)",
           "description": "How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading."
         },
+        {
+          "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."
+        },
         {
           "name": "RevealFlow",
           "code": "() => (\n  <StoryRouter>\n    <RevealFlowShell />\n  </StoryRouter>\n)",

package/package.json

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