refactor: renamed compact prop to pinned

MIGRATION_GUIDE_v5.md

@@ -90,3 +90,107 @@ The following variables have been replaced with zone-specific alternatives:
 2. **Footer icons**: Replace `--gn-aside-header-general-item-icon-color` with `--gn-aside-bottom-item-icon-color`
 3. **Subheader current icons**: Replace `--gn-aside-header-item-current-icon-color` with `--gn-aside-top-item-current-icon-color`
 4. **Footer current icons**: Replace `--gn-aside-header-item-current-icon-color` with `--gn-aside-bottom-item-current-icon-color`
+
+## Breaking Changes: Prop Renaming (`compact` → `pinned`/`isExpanded`)
+
+The `compact` prop and related APIs have been renamed to use clearer semantics with **inverted boolean logic**.
+
+### Main Prop Changes
+
+| Old Prop/Parameter                            | New Prop/Parameter                         | Notes                                           |
+| --------------------------------------------- | ------------------------------------------ | ----------------------------------------------- |
+| `compact: boolean`                            | `pinned: boolean`                          | **Inverted!** `compact: true` → `pinned: false` |
+| `onChangeCompact`                             | `onChangePinned`                           | Callback receives inverted value                |
+| `AsideHeaderItem.compact`                     | `AsideHeaderItem.isExpanded`               | Used by `FooterItem`                            |
+| `renderFooter({ compact })`                   | `renderFooter({ isExpanded })`             | Parameter renamed (AsideHeader)                 |
+| `collapseButtonWrapper(_, { compact })`       | `collapseButtonWrapper(_, { isExpanded })` | Parameter renamed                               |
+| `MenuItem.itemWrapper opts.compact`           | `MenuItem.itemWrapper opts.pinned`         | In itemWrapper callback                         |
+| `LogoProps.wrapper(_, compact)`               | `LogoProps.wrapper(_, isExpanded)`         | Second parameter renamed                        |
+| `MobileLogoProps.compact`                     | `MobileLogoProps.isExpanded`               | MobileLogo prop renamed                         |
+| `BurgerMenuProps.renderFooter({ isCompact })` | `renderFooter({ isExpanded })`             | MobileHeader burger menu                        |
+
+### Context Changes
+
+The `AsideHeaderContext` has been updated:
+
+```typescript
+// Before (v4.x)
+interface AsideHeaderContextType {
+  compact: boolean;
+  onChangeCompact?: (compact: boolean) => void;
+  // ...
+}
+
+// After (v5.0)
+interface AsideHeaderContextType {
+  pinned: boolean; // Note: inverted semantics!
+  onChangePinned?: (pinned: boolean) => void;
+  // ...
+}
+```
+
+### Migration Examples
+
+**AsideHeader component:**
+
+```tsx
+// Before (v4.x)
+<AsideHeader
+  compact={isCompact}
+  onChangeCompact={setIsCompact}
+/>
+
+// After (v5.0)
+<AsideHeader
+  pinned={!isCompact}  // or use new state: pinned={isPinned}
+  onChangePinned={setIsPinned}
+/>
+```
+
+**FooterItem component:**
+
+```tsx
+// Before (v4.x)
+<FooterItem compact={!isExpanded} />
+
+// After (v5.0)
+<FooterItem isExpanded={isExpanded} />
+```
+
+**renderFooter callback:**
+
+```tsx
+// Before (v4.x)
+renderFooter={({ compact }) => (
+  <FooterItem compact={compact} />
+)}
+
+// After (v5.0)
+renderFooter={({ isExpanded }) => (
+  <FooterItem isExpanded={isExpanded} />
+)}
+```
+
+**Logo wrapper:**
+
+```tsx
+// Before (v4.x)
+logo={{
+  wrapper: (node, compact) => <Link>{node}</Link>
+}}
+
+// After (v5.0)
+logo={{
+  wrapper: (node, isExpanded) => <Link>{node}</Link>
+}}
+```
+
+**itemWrapper callback:**
+
+```tsx
+// Before (v4.x)
+itemWrapper={(params, makeItem, { compact }) => makeItem(params)}
+
+// After (v5.0)
+itemWrapper={(params, makeItem, { pinned }) => makeItem(params)}
+```

src/components/AsideHeader/AsideHeader.module.scss

@@ -104,7 +104,7 @@ $block: '.#{variables.$ns}aside-header';
         }
     }
 
-    &_compact &__aside {
+    &_collapsed &__aside {
         background-color: var(
             --gn-aside-header-collapsed-background-color,
             var(--gn-aside-header-background-color, var(--_--background-color))
@@ -198,13 +198,13 @@ $block: '.#{variables.$ns}aside-header';
         }
     }
 
-    &_compact &__header {
+    &_collapsed &__header {
         &::before {
             display: block;
         }
     }
 
-    &_compact &__header_with-decoration {
+    &_collapsed &__header_with-decoration {
         #{$class}__header-divider {
             display: block;
         }
@@ -293,7 +293,7 @@ $block: '.#{variables.$ns}aside-header';
     &__pin-button {
         margin-left: auto;
 
-        &_compact {
+        &_collapsed {
             margin-right: auto;
         }
     }

src/components/AsideHeader/AsideHeader.tsx

@@ -5,11 +5,11 @@ import {PageLayoutAside} from './components/PageLayout/PageLayoutAside';
 import {AsideHeaderProps} from './types';
 
 export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(
-    ({compact, className, topAlert, ...props}, ref) => {
+    ({pinned, className, topAlert, ...props}, ref) => {
         return (
             <PageLayout
-                compact={compact}
-                onChangeCompact={props.onChangeCompact}
+                pinned={pinned}
+                onChangePinned={props.onChangePinned}
                 className={className}
                 topAlert={topAlert}
             >

src/components/AsideHeader/AsideHeaderContext.ts

@@ -39,19 +39,20 @@ export const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {
 };
 
 export interface AsideHeaderContextType {
-    compact: boolean;
+    /** Navigation visual state. When `true`, the navigation is expanded (pinned open). When `false`, it is collapsed. */
+    pinned: boolean;
     size: number;
     isExpanded: boolean;
-    onChangeCompact?: (compact: boolean) => void;
+    onChangePinned?: (pinned: boolean) => void;
     onExpand?: () => void;
     onFold?: () => void;
 }
 
 const AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>({
-    compact: false,
+    pinned: true,
     size: 0,
     isExpanded: false,
-    onChangeCompact: () => {},
+    onChangePinned: () => {},
     onExpand: () => {},
     onFold: () => {},
 });