diff --git a/src/community/components/dock-panel/dock-panel.module.scss b/src/community/components/dock-panel/dock-panel.module.scss
index 9f92b2ee3..fa245e36c 100644
--- a/src/community/components/dock-panel/dock-panel.module.scss
+++ b/src/community/components/dock-panel/dock-panel.module.scss
@@ -1,4 +1,5 @@
 .tedi-dock-panel,
+.tedi-dock-panel__resize-layout,
 .tedi-dock-panel-layout {
   --dock-panel-gap: var(--tedi-dimensions-04);
   --dock-panel-rail-size: calc(var(--button-md-height) + 2 * var(--dock-panel-gap) + 2px);
@@ -30,54 +31,20 @@
   border: 1px solid var(--general-border-primary);
 }
 
-.tedi-dock-panel[data-size='small'] {
-  --dock-panel-padding: var(--modal-body-padding-sm);
-  --dock-panel-header-padding-x: var(--modal-heading-padding-x-sm);
-  --dock-panel-header-padding-y: var(--modal-heading-padding-y-sm);
-  --dock-panel-footer-padding-x: var(--modal-footer-padding-x-sm);
-  --dock-panel-footer-padding-y: var(--modal-footer-padding-y-sm);
-}
-
-.tedi-dock-panel[data-placement='right'] {
-  top: 0;
-  right: 0;
-  width: var(--dock-panel-width);
-  height: var(--dock-panel-height);
-}
-
-.tedi-dock-panel[data-placement='left'] {
-  top: 0;
-  left: 0;
-  width: var(--dock-panel-width);
-  height: var(--dock-panel-height);
-}
-
-.tedi-dock-panel[data-placement='top'],
-.tedi-dock-panel[data-placement='bottom'] {
-  --dock-panel-height: 50%;
-}
-
-.tedi-dock-panel[data-placement='top'] {
-  top: 0;
-  right: 0;
-  left: 0;
-  height: var(--dock-panel-height);
-}
-
-.tedi-dock-panel[data-placement='bottom'] {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--dock-panel-height);
-}
-
 .tedi-dock-panel__header {
   display: flex;
   flex: 0 0 auto;
+  flex-direction: column;
+  gap: var(--tedi-dimensions-05);
+  min-width: 0;
+  padding: var(--dock-panel-header-padding-y) var(--dock-panel-header-padding-x);
+}
+
+.tedi-dock-panel__header-row {
+  display: flex;
   gap: var(--dock-panel-gap);
   align-items: center;
   min-width: 0;
-  padding: var(--dock-panel-header-padding-y) var(--dock-panel-header-padding-x);
 }
 
 .tedi-dock-panel__title {
@@ -90,13 +57,11 @@
   white-space: nowrap;
 }
 
-.tedi-dock-panel__header-actions {
-  display: flex;
-  flex: 0 0 auto;
-  gap: var(--dock-panel-gap);
-  align-items: center;
+.tedi-dock-panel__description {
+  color: var(--general-text-secondary);
 }
 
+.tedi-dock-panel__header-actions,
 .tedi-dock-panel__controls {
   display: flex;
   flex: 0 0 auto;
@@ -119,14 +84,7 @@
   border-top: 1px solid var(--general-border-primary);
 }
 
-/* Override flex declarations so hidden content does not remain interactive. */
-.tedi-dock-panel[hidden],
-.tedi-dock-panel__body[hidden],
-.tedi-dock-panel__header-actions[hidden] {
-  display: none;
-}
-
-.tedi-dock-panel__content {
+.tedi-dock-panel__scroll-area {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
@@ -136,7 +94,7 @@
 }
 
 /* Keep padding inside the scrollport so short panels cannot push the footer out of view. */
-.tedi-dock-panel__content-inner {
+.tedi-dock-panel__content {
   min-width: 0;
   padding: var(--dock-panel-padding);
 }
@@ -147,6 +105,101 @@
   border-top: 1px solid var(--general-border-primary);
 }
 
+.tedi-dock-panel__resize-measurement {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.tedi-dock-panel__resize-layout {
+  position: absolute;
+  inset: 0;
+  z-index: var(--dock-panel-layer, 1);
+  display: flex;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.tedi-dock-panel__resizer {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  pointer-events: auto;
+}
+
+.tedi-dock-panel-layout {
+  position: relative;
+  box-sizing: border-box;
+  display: grid;
+  grid-template:
+    'top top top' auto
+    'left workspace right' minmax(0, 1fr)
+    'bottom bottom bottom' auto / auto minmax(0, 1fr) auto;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  isolation: isolate;
+}
+
+.tedi-dock-panel-layout__content {
+  position: relative;
+  z-index: 0;
+  grid-area: workspace;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.tedi-dock-panel[data-size='small'] {
+  --dock-panel-padding: var(--modal-body-padding-sm);
+  --dock-panel-header-padding-x: var(--modal-heading-padding-x-sm);
+  --dock-panel-header-padding-y: var(--modal-heading-padding-y-sm);
+  --dock-panel-footer-padding-x: var(--modal-footer-padding-x-sm);
+  --dock-panel-footer-padding-y: var(--modal-footer-padding-y-sm);
+}
+
+.tedi-dock-panel[data-placement='left'],
+.tedi-dock-panel[data-placement='right'] {
+  top: 0;
+  width: var(--dock-panel-width);
+  height: var(--dock-panel-height);
+}
+
+.tedi-dock-panel[data-placement='left'] {
+  left: 0;
+}
+
+.tedi-dock-panel[data-placement='right'] {
+  right: 0;
+}
+
+.tedi-dock-panel[data-placement='top'],
+.tedi-dock-panel[data-placement='bottom'] {
+  --dock-panel-height: 50%;
+
+  right: 0;
+  left: 0;
+  height: var(--dock-panel-height);
+}
+
+.tedi-dock-panel[data-placement='top'] {
+  top: 0;
+}
+
+.tedi-dock-panel[data-placement='bottom'] {
+  bottom: 0;
+}
+
+/* Override flex declarations so hidden content does not remain interactive. */
+.tedi-dock-panel__body[hidden],
+.tedi-dock-panel__header-actions[hidden] {
+  display: none;
+}
+
 /* The minimized rail must fit its controls independently of expanded padding density. */
 .tedi-dock-panel[data-collapsed='true'] .tedi-dock-panel__header {
   padding: var(--dock-panel-gap);
@@ -156,12 +209,16 @@
 .tedi-dock-panel[data-collapsed='true'][data-placement='right'] {
   width: var(--dock-panel-rail-size);
 
-  .tedi-dock-panel__header {
+  .tedi-dock-panel__header,
+  .tedi-dock-panel__header-row {
     flex: 1 1 auto;
-    flex-direction: column;
     min-height: 0;
   }
 
+  .tedi-dock-panel__header-row {
+    flex-direction: column;
+  }
+
   .tedi-dock-panel__title {
     order: 2;
     text-align: center;
@@ -170,7 +227,7 @@
   }
 
   .tedi-dock-panel__controls {
-    flex-direction: column;
+    flex-direction: column-reverse;
     order: 1;
   }
 }
@@ -180,49 +237,89 @@
   height: var(--dock-panel-rail-size);
 }
 
-.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'] {
+.tedi-dock-panel[data-resizable='true'] {
+  height: 100%;
+  max-height: 100%;
+  pointer-events: auto;
+}
+
+.tedi-dock-panel[data-resizable='true'][data-collapsed='false'] {
+  width: 100%;
+}
+
+.tedi-dock-panel__resize-layout[data-placement='right'] {
+  justify-content: flex-end;
+}
+
+.tedi-dock-panel__resize-layout[data-placement='top'] > .tedi-dock-panel__resizer,
+.tedi-dock-panel__resize-layout[data-placement='bottom'] > .tedi-dock-panel__resizer {
+  flex: 1 1 0;
+}
+
+.tedi-dock-panel__resize-layout[data-placement='top'] > .tedi-dock-panel__resizer {
+  align-self: flex-start;
+}
+
+.tedi-dock-panel__resize-layout[data-placement='bottom'] {
+  top: auto;
+
+  > .tedi-dock-panel__resizer {
+    align-self: flex-end;
+  }
+}
+
+.tedi-dock-panel__resize-layout[data-collapsed='true'] {
+  overflow: clip;
+
+  > .tedi-dock-panel__resizer {
+    flex-shrink: 0;
+    max-width: none;
+    max-height: none;
+    pointer-events: none;
+  }
+}
+
+.tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='left'],
+.tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='right'] {
+  width: var(--dock-panel-rail-size);
+}
+
+.tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='top'],
+.tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='bottom'] {
+  height: var(--dock-panel-rail-size);
+}
+
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'] {
   position: relative;
   inset: auto;
   align-self: start;
 }
 
-.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='left'] {
-  grid-area: 2 / 1;
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='left'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='left'] {
+  grid-area: left;
 }
 
-.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='right'] {
-  grid-area: 2 / 3;
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='right'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='right'] {
+  grid-area: right;
   justify-self: end;
 }
 
-.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='top'] {
-  grid-area: 1 / 1 / 2 / 4;
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='top'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='top'],
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='bottom'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='bottom'] {
   width: 100%;
 }
 
-.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='bottom'] {
-  grid-area: 3 / 1 / 4 / 4;
-  width: 100%;
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='top'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='top'] {
+  grid-area: top;
 }
 
-.tedi-dock-panel-layout {
-  position: relative;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  width: 100%;
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-  isolation: isolate;
-}
-
-.tedi-dock-panel-layout__content {
-  position: relative;
-  z-index: 0;
-  grid-area: 2 / 2;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
+.tedi-dock-panel-layout > .tedi-dock-panel[data-collapsed='true'][data-placement='bottom'],
+.tedi-dock-panel-layout > .tedi-dock-panel__resize-layout[data-collapsed='true'][data-placement='bottom'] {
+  grid-area: bottom;
 }
diff --git a/src/community/components/dock-panel/dock-panel.spec.tsx b/src/community/components/dock-panel/dock-panel.spec.tsx
index ec4d60736..1beee4b02 100644
--- a/src/community/components/dock-panel/dock-panel.spec.tsx
+++ b/src/community/components/dock-panel/dock-panel.spec.tsx
@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createRef, useState } from 'react';
+import { useState } from 'react';
 
 import {
   DockPanel,
@@ -10,6 +10,8 @@ import {
   DockPanelPlacement,
 } from './dock-panel';
 
+jest.mock('react-sticky-box', () => ({ __esModule: true, default: () => null }));
+
 jest.mock('../../../tedi/helpers', () => ({
   ...jest.requireActual('../../../tedi/helpers'),
   useBreakpointProps: () => ({
@@ -31,7 +33,7 @@ Editor.displayName = 'DockPanelTestEditor';
 
 describe('DockPanel', () => {
   it('renders an expanded, labelled, non-modal region by default', () => {
-    render(
+    const { container } = render(
       <DockPanel title="Details" labels={labels}>
         Content
       </DockPanel>
@@ -41,10 +43,30 @@ describe('DockPanel', () => {
     expect(panel).toHaveAttribute('data-placement', 'right');
     expect(panel).toHaveAttribute('data-collapsed', 'false');
     expect(panel).not.toHaveAttribute('aria-modal');
-    expect(screen.getByRole('heading', { name: 'Details', level: 3 })).toBeInTheDocument();
+    expect(panel).toHaveAttribute('aria-labelledby', screen.getByRole('heading', { name: 'Details', level: 3 }).id);
     expect(screen.getByRole('button', { name: labels.collapse })).toHaveAttribute('aria-expanded', 'true');
+    expect(container.querySelector('.tedi-dock-panel__resizer')).not.toBeInTheDocument();
   });
 
+  it.each(['small', 'default'] as const)(
+    'preserves the heading override with %s density when minimizing',
+    async (size) => {
+      const user = userEvent.setup();
+      render(
+        <DockPanel title="Details" labels={labels} size={size} headingElement="h2">
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByRole('heading', { name: 'Details', level: 2 })).not.toHaveClass('text-small');
+
+      await user.click(screen.getByRole('button', { name: labels.collapse }));
+      expect(screen.getByRole('heading', { name: 'Details', level: 2 })).toHaveClass('text-small');
+
+      await user.click(screen.getByRole('button', { name: labels.expand }));
+      expect(screen.getByRole('heading', { name: 'Details', level: 2 })).not.toHaveClass('text-small');
+    }
+  );
+
   it.each<DockPanelPlacement>(['left', 'right', 'top', 'bottom'])('supports %s placement', (placement) => {
     render(
       <DockPanel title="Details" labels={labels} placement={placement}>
@@ -147,6 +169,176 @@ describe('DockPanel', () => {
     expect(screen.getByText('Content')).not.toBeVisible();
   });
 
+  describe('minimizeCounter', () => {
+    it.each([undefined, 0, 5])('ignores the initial value %s', (minimizeCounter) => {
+      const onChange = jest.fn();
+      render(
+        <DockPanel title="Details" labels={labels} minimizeCounter={minimizeCounter} onCollapsedChange={onChange}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).toBeVisible();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('minimizes on changes in either direction and restores with its content preserved', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      const props = { title: 'Details', labels, onCollapsedChange: onChange };
+      const { rerender } = render(
+        <DockPanel {...props} minimizeCounter={1}>
+          <Editor />
+        </DockPanel>
+      );
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, 'Unsaved changes');
+
+      rerender(
+        <DockPanel {...props} minimizeCounter={2}>
+          <Editor />
+        </DockPanel>
+      );
+      expect(input).toBeInTheDocument();
+      expect(input).not.toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenLastCalledWith(true);
+
+      await user.click(screen.getByRole('button', { name: labels.expand }));
+      expect(screen.getByRole('textbox')).toBe(input);
+      expect(input).toHaveValue('Unsaved changes');
+      expect(onChange).toHaveBeenLastCalledWith(false);
+
+      rerender(
+        <DockPanel {...props} title="Updated title" minimizeCounter={2}>
+          <Editor />
+        </DockPanel>
+      );
+      expect(input).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(2);
+
+      rerender(
+        <DockPanel {...props} minimizeCounter={1}>
+          <Editor />
+        </DockPanel>
+      );
+      expect(input).not.toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(3);
+      expect(onChange).toHaveBeenLastCalledWith(true);
+    });
+
+    it.each([
+      [undefined, 0],
+      [0, undefined],
+    ])('treats a change from %s to %s as a minimize request', (initial, next) => {
+      const onChange = jest.fn();
+      const props = { title: 'Details', labels, onCollapsedChange: onChange };
+      const { rerender } = render(
+        <DockPanel {...props} minimizeCounter={initial}>
+          Content
+        </DockPanel>
+      );
+      rerender(
+        <DockPanel {...props} minimizeCounter={next}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).not.toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(true);
+    });
+
+    it('consumes counter changes while already minimized without affecting restoration', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      const props = { title: 'Details', labels, defaultCollapsed: true, onCollapsedChange: onChange };
+      const { rerender } = render(
+        <DockPanel {...props} minimizeCounter={0}>
+          Content
+        </DockPanel>
+      );
+      rerender(
+        <DockPanel {...props} minimizeCounter={1}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).not.toBeVisible();
+      expect(onChange).not.toHaveBeenCalled();
+
+      await user.click(screen.getByRole('button', { name: labels.expand }));
+      expect(screen.getByText('Content')).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(false);
+    });
+
+    it('requests controlled minimization once and leaves state changes to the parent', async () => {
+      const user = userEvent.setup();
+      const onChange = jest.fn();
+      const props = { title: 'Details', labels, collapsed: false, onCollapsedChange: onChange };
+      const { rerender } = render(
+        <DockPanel {...props} minimizeCounter={0}>
+          Content
+        </DockPanel>
+      );
+      expect(onChange).not.toHaveBeenCalled();
+
+      rerender(
+        <DockPanel {...props} minimizeCounter={1}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(true);
+
+      const onNextChange = jest.fn();
+      const nextProps = { ...props, title: 'Updated title', onCollapsedChange: onNextChange };
+      rerender(
+        <DockPanel {...nextProps} minimizeCounter={1}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).toBeVisible();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onNextChange).not.toHaveBeenCalled();
+
+      rerender(
+        <DockPanel {...nextProps} minimizeCounter={2}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).toBeVisible();
+      expect(onNextChange).toHaveBeenCalledTimes(1);
+      expect(onNextChange).toHaveBeenCalledWith(true);
+
+      rerender(
+        <DockPanel {...nextProps} collapsed minimizeCounter={2}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).not.toBeVisible();
+      rerender(
+        <DockPanel {...nextProps} collapsed minimizeCounter={3}>
+          Content
+        </DockPanel>
+      );
+      expect(onNextChange).toHaveBeenCalledTimes(1);
+
+      await user.click(screen.getByRole('button', { name: labels.expand }));
+      expect(onNextChange).toHaveBeenCalledTimes(2);
+      expect(onNextChange).toHaveBeenLastCalledWith(false);
+      expect(screen.getByText('Content')).not.toBeVisible();
+
+      rerender(
+        <DockPanel {...nextProps} minimizeCounter={3}>
+          Content
+        </DockPanel>
+      );
+      expect(screen.getByText('Content')).toBeVisible();
+      expect(onNextChange).toHaveBeenCalledTimes(2);
+    });
+  });
+
   it('keeps keyboard focus on the toggle when minimized', async () => {
     const user = userEvent.setup();
     render(
@@ -162,19 +354,21 @@ describe('DockPanel', () => {
     expect(screen.getByRole('button', { name: labels.collapse })).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('moves focus out of content on a programmatic collapse', () => {
+  it('does not move focus to the toggle on a programmatic collapse', () => {
     const { rerender } = render(
       <DockPanel title="Details" labels={labels} collapsed={false}>
         <Editor />
       </DockPanel>
     );
-    act(() => screen.getByRole('textbox').focus());
+    const input = screen.getByRole('textbox');
+    act(() => input.focus());
     rerender(
       <DockPanel title="Details" labels={labels} collapsed>
         <Editor />
       </DockPanel>
     );
-    expect(screen.getByRole('button', { name: labels.expand })).toHaveFocus();
+    expect(input).not.toBeVisible();
+    expect(screen.getByRole('button', { name: labels.expand })).not.toHaveFocus();
   });
 
   it('does not steal focus from the application on a programmatic collapse', () => {
@@ -193,24 +387,65 @@ describe('DockPanel', () => {
     expect(screen.getByRole('button', { name: 'Outside' })).toHaveFocus();
   });
 
-  it('hides header actions and the footer without unmounting them', async () => {
+  it.each([null, undefined, false, true])('omits optional slot wrappers for %s', (content) => {
+    const { container } = render(
+      <DockPanel title="Details" labels={labels} headerActions={content} footer={content}>
+        Content
+      </DockPanel>
+    );
+    expect(container.querySelector('.tedi-dock-panel__header-actions')).not.toBeInTheDocument();
+    expect(container.querySelector('.tedi-dock-panel__footer')).not.toBeInTheDocument();
+  });
+
+  it('renders numeric zero in both optional slots', () => {
+    const { container } = render(
+      <DockPanel title="Details" labels={labels} headerActions={0} footer={0}>
+        Content
+      </DockPanel>
+    );
+    expect(container.querySelector('.tedi-dock-panel__header-actions')).toHaveTextContent('0');
+    expect(container.querySelector('.tedi-dock-panel__footer')).toHaveTextContent('0');
+  });
+
+  it.each([undefined, ''])('omits the description when it is %s', (description) => {
+    const { container } = render(
+      <DockPanel title="Details" labels={labels} description={description}>
+        Content
+      </DockPanel>
+    );
+    expect(container.querySelector('.tedi-dock-panel__description')).not.toBeInTheDocument();
+  });
+
+  it('hides the description, header actions and footer without unmounting them', async () => {
     const user = userEvent.setup();
     render(
       <DockPanel
         title="Details"
         labels={labels}
+        description="Supporting information"
         headerActions={<button type="button">Header action</button>}
         footer={<button type="button">Footer action</button>}
       >
         Content
       </DockPanel>
     );
+    const description = screen.getByText('Supporting information');
     const headerAction = screen.getByRole('button', { name: 'Header action' });
     const footerAction = screen.getByRole('button', { name: 'Footer action' });
+    expect(description).toBeVisible();
     await user.click(screen.getByRole('button', { name: labels.collapse }));
+    expect(description).toBeInTheDocument();
+    expect(description).not.toBeVisible();
     expect(headerAction).toBeInTheDocument();
     expect(headerAction).not.toBeVisible();
+    expect(footerAction).toBeInTheDocument();
     expect(footerAction).not.toBeVisible();
+
+    await user.click(screen.getByRole('button', { name: labels.expand }));
+    expect(screen.getByText('Supporting information')).toBe(description);
+    expect(description).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Header action' })).toBe(headerAction);
+    expect(screen.getByRole('button', { name: 'Footer action' })).toBe(footerAction);
   });
 
   it('skips minimized content when tabbing', async () => {
@@ -229,34 +464,29 @@ describe('DockPanel', () => {
     expect(screen.getByRole('button', { name: 'After panel' })).toHaveFocus();
   });
 
-  it('does not restore focus after the user explicitly blurred the editor', () => {
-    const { rerender } = render(
-      <DockPanel title="Details" labels={labels} collapsed={false}>
-        <Editor />
-      </DockPanel>
-    );
-    const input = screen.getByRole('textbox');
-    act(() => input.focus());
-    act(() => input.blur());
-    rerender(
-      <DockPanel title="Details" labels={labels} collapsed>
-        <Editor />
-      </DockPanel>
-    );
-    expect(screen.getByRole('button', { name: labels.expand })).not.toHaveFocus();
-  });
-
-  it('delegates closing to the parent', async () => {
+  it.each([false, true])('delegates closing without changing collapsed=%s', async (defaultCollapsed) => {
     const user = userEvent.setup();
     const onClose = jest.fn();
+    const onCollapsedChange = jest.fn();
     render(
-      <DockPanel title="Details" labels={labels} onClose={onClose}>
+      <DockPanel
+        title="Details"
+        labels={labels}
+        defaultCollapsed={defaultCollapsed}
+        onClose={onClose}
+        onCollapsedChange={onCollapsedChange}
+      >
         Content
       </DockPanel>
     );
     await user.click(screen.getByRole('button', { name: labels.close }));
     expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onCollapsedChange).not.toHaveBeenCalled();
     expect(screen.getByRole('region')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: defaultCollapsed ? labels.expand : labels.collapse })).toHaveAttribute(
+      'aria-expanded',
+      String(!defaultCollapsed)
+    );
   });
 
   it('does not render a close button unless requested', () => {
@@ -286,21 +516,20 @@ describe('DockPanel', () => {
     ids.forEach((id) => expect(document.getElementById(id ?? '')).toBeInTheDocument());
   });
 
-  it('forwards the ref and accepts per-instance dimensions', () => {
-    const ref = createRef<HTMLDivElement>();
+  it('accepts an explicit id and per-instance dimensions', () => {
     render(
-      <DockPanel ref={ref} id="details" title="Details" labels={labels} width={420} height="60%">
+      <DockPanel id="details" title="Details" labels={labels} width={420} height="60%">
         Content
       </DockPanel>
     );
-    expect(ref.current).toBe(screen.getByRole('region'));
-    expect(ref.current).toHaveAttribute('id', 'details');
-    expect(ref.current?.style.getPropertyValue('--dock-panel-width')).toBe('420px');
-    expect(ref.current?.style.getPropertyValue('--dock-panel-height')).toBe('60%');
+    const panel = screen.getByRole('region');
+    expect(panel).toHaveAttribute('id', 'details');
+    expect(panel.style.getPropertyValue('--dock-panel-width')).toBe('420px');
+    expect(panel.style.getPropertyValue('--dock-panel-height')).toBe('60%');
   });
 
   it.each<DockPanelPlacement>(['left', 'right', 'top', 'bottom'])(
-    'accepts content height and a height limit for %s placement without leaking props to the DOM',
+    'sets content height and a height limit for %s placement',
     (placement) => {
       render(
         <DockPanel title="Details" labels={labels} placement={placement} height="auto" maxHeight="calc(100% - 4rem)">
@@ -310,8 +539,6 @@ describe('DockPanel', () => {
       const panel = screen.getByRole('region');
       expect(panel.style.getPropertyValue('--dock-panel-height')).toBe('auto');
       expect(panel.style.getPropertyValue('--dock-panel-max-height')).toBe('calc(100% - 4rem)');
-      expect(panel).not.toHaveAttribute('height');
-      expect(panel).not.toHaveAttribute('maxHeight');
     }
   );
 
@@ -374,74 +601,201 @@ describe('DockPanel', () => {
     expect(panel.style.getPropertyValue('--dock-panel-max-height')).toBe('');
   });
 
-  describe.each<DockPanelPlacement>(['left', 'right', 'top', 'bottom'])('%s controls', (placement) => {
-    it.each([false, true])('keeps toggle and close together when collapsed=%s', (defaultCollapsed) => {
+  it.each([false, true])(
+    'keeps toggle and Close consecutive in the keyboard order when collapsed=%s',
+    async (defaultCollapsed) => {
+      const user = userEvent.setup();
       render(
-        <DockPanel
-          title="Details"
-          labels={labels}
-          placement={placement}
-          defaultCollapsed={defaultCollapsed}
-          onClose={jest.fn()}
-          headerActions={<button type="button">Custom action</button>}
-        >
-          Content
-        </DockPanel>
+        <>
+          <DockPanel
+            title="Details"
+            labels={labels}
+            defaultCollapsed={defaultCollapsed}
+            onClose={jest.fn()}
+            headerActions={<button type="button">Custom action</button>}
+          >
+            <Editor />
+          </DockPanel>
+          <button type="button">After panel</button>
+        </>
       );
 
-      const toggle = screen.getByRole('button', { name: defaultCollapsed ? labels.expand : labels.collapse });
-      const close = screen.getByRole('button', { name: labels.close });
-      const controls = toggle.closest('.tedi-dock-panel__controls');
+      await user.tab();
+      if (!defaultCollapsed) {
+        expect(screen.getByRole('button', { name: 'Custom action' })).toHaveFocus();
+        await user.tab();
+      }
+      expect(screen.getByRole('button', { name: defaultCollapsed ? labels.expand : labels.collapse })).toHaveFocus();
+      await user.tab();
+      expect(screen.getByRole('button', { name: labels.close })).toHaveFocus();
+      await user.tab();
+      if (!defaultCollapsed) {
+        expect(screen.getByRole('textbox')).toHaveFocus();
+        await user.tab();
+      }
+      expect(screen.getByRole('button', { name: 'After panel' })).toHaveFocus();
+    }
+  );
+
+  describe('resizing', () => {
+    const measurePanel = () => ({
+      width: 500,
+      height: 400,
+      top: 0,
+      left: 0,
+      right: 500,
+      bottom: 400,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
 
-      // The structural assertion prevents a title or custom action separating these controls.
-      expect(controls).not.toBeNull();
-      expect(controls).toContainElement(close);
-      expect(controls).not.toContainElement(screen.getByRole('heading', { name: 'Details' }));
-      expect(controls).not.toContainElement(screen.getByText('Custom action'));
-      expect(close).toBeVisible();
+    beforeEach(() => {
+      const workspace = document.createElement('div');
+      Object.defineProperties(workspace, {
+        clientWidth: { value: 1000 },
+        clientHeight: { value: 800 },
+      });
+      const getBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+      jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+        return this.classList.contains('tedi-dock-panel__resize-measurement')
+          ? measurePanel()
+          : getBoundingClientRect.call(this);
+      });
+      jest.spyOn(HTMLElement.prototype, 'offsetParent', 'get').mockReturnValue(workspace);
     });
 
-    it('can close while minimized without restoring first', async () => {
+    afterEach(() => jest.restoreAllMocks());
+
+    it.each([
+      ['left', 200, 100, '600px', 'auto'],
+      ['right', 0, 100, '600px', 'auto'],
+      ['top', 100, 200, '500px', '500px'],
+      ['bottom', 100, 0, '500px', '500px'],
+    ] as const)('resizes %s placement from its workspace-facing edge', async (placement, x, y, width, height) => {
       const user = userEvent.setup();
-      const onClose = jest.fn();
-      const onCollapsedChange = jest.fn();
-      render(
-        <DockPanel
-          title="Details"
-          labels={labels}
-          placement={placement}
-          defaultCollapsed
-          onClose={onClose}
-          onCollapsedChange={onCollapsedChange}
-        >
+      const { container } = render(
+        <DockPanel title="Details" labels={labels} placement={placement} width="md" height="md" resizable>
           Content
         </DockPanel>
       );
+      const resizer = container.querySelector('.tedi-dock-panel__resizer') as HTMLElement;
+      const handle = resizer.querySelector('[data-show-indicator]') as HTMLElement;
+      expect(resizer.style.width).toBe('500px');
+      expect(resizer.style.height).toBe(placement === 'left' || placement === 'right' ? 'auto' : '400px');
 
-      await user.click(screen.getByRole('button', { name: labels.close }));
-      expect(onClose).toHaveBeenCalledTimes(1);
-      expect(onCollapsedChange).not.toHaveBeenCalled();
-      expect(screen.getByRole('region')).toHaveAttribute('data-collapsed', 'true');
+      await user.pointer([
+        { target: handle, keys: '[MouseLeft>]', coords: { x: 100, y: 100 } },
+        { coords: { x, y } },
+        { keys: '[/MouseLeft]' },
+      ]);
+      expect(resizer.style.width).toBe(width);
+      expect(resizer.style.height).toBe(height);
     });
-  });
 
-  it('keeps restore and close consecutive in the minimized keyboard order', async () => {
-    const user = userEvent.setup();
-    render(
-      <>
-        <DockPanel title="Details" labels={labels} defaultCollapsed onClose={jest.fn()}>
-          <Editor />
-        </DockPanel>
-        <button type="button">After panel</button>
-      </>
+    it.each(['right', 'bottom'] as const)(
+      'starts minimized at %s and restores the measured size',
+      async (placement) => {
+        const user = userEvent.setup();
+        const onChange = jest.fn();
+        const { container } = render(
+          <DockPanel
+            title="Details"
+            labels={labels}
+            placement={placement}
+            width="md"
+            height="md"
+            resizable
+            defaultCollapsed
+            onCollapsedChange={onChange}
+          >
+            Content
+          </DockPanel>
+        );
+        expect(screen.getByText('Content')).not.toBeVisible();
+        expect(onChange).not.toHaveBeenCalled();
+
+        await user.click(screen.getByRole('button', { name: labels.expand }));
+        expect(screen.getByText('Content')).toBeVisible();
+        expect(container.querySelector('.tedi-dock-panel__resizer')).toHaveStyle({
+          width: '500px',
+          height: placement === 'right' ? 'auto' : '400px',
+        });
+      }
     );
 
-    await user.tab();
-    expect(screen.getByRole('button', { name: labels.expand })).toHaveFocus();
-    await user.tab();
-    expect(screen.getByRole('button', { name: labels.close })).toHaveFocus();
-    await user.tab();
-    expect(screen.getByRole('button', { name: 'After panel' })).toHaveFocus();
+    it.each(['right', 'bottom'] as const)(
+      'keeps %s resizing between zero and the measured workspace size',
+      async (placement) => {
+        const user = userEvent.setup();
+        const { container } = render(
+          <DockPanel title="Details" labels={labels} placement={placement} resizable>
+            Content
+          </DockPanel>
+        );
+        const resizer = container.querySelector('.tedi-dock-panel__resizer') as HTMLElement;
+        const handle = resizer.querySelector('[data-show-indicator]') as HTMLElement;
+        const dimension = placement === 'right' ? 'width' : 'height';
+
+        await user.pointer([
+          { target: handle, keys: '[MouseLeft>]', coords: { x: 100, y: 100 } },
+          { coords: { x: -2000, y: -2000 } },
+          { keys: '[/MouseLeft]' },
+        ]);
+        expect(resizer.style[dimension]).toBe(placement === 'right' ? '1000px' : '800px');
+
+        await user.pointer([
+          { target: handle, keys: '[MouseLeft>]', coords: { x: 100, y: 100 } },
+          { coords: { x: 2100, y: 2100 } },
+          { keys: '[/MouseLeft]' },
+        ]);
+        expect(resizer.style[dimension]).toBe('0px');
+      }
+    );
+
+    it.each(['right', 'bottom'] as const)(
+      'preserves %s resized dimensions and content through minimize/restore and rerenders',
+      async (placement) => {
+        const user = userEvent.setup();
+        const props = { title: 'Details', labels, placement, resizable: true };
+        const { container, rerender } = render(
+          <DockPanel {...props}>
+            <Editor />
+          </DockPanel>
+        );
+        const input = screen.getByRole('textbox');
+        await user.clear(input);
+        await user.type(input, 'Keep resized changes');
+        const resizer = container.querySelector('.tedi-dock-panel__resizer') as HTMLElement;
+        const handle = resizer.querySelector('[data-show-indicator]') as HTMLElement;
+        await user.pointer([
+          { target: handle, keys: '[MouseLeft>]', coords: { x: 100, y: 100 } },
+          { coords: { x: 50, y: 50 } },
+          { keys: '[/MouseLeft]' },
+        ]);
+        const dimensions = {
+          width: placement === 'right' ? '550px' : '500px',
+          height: placement === 'right' ? 'auto' : '450px',
+        };
+        expect(resizer).toHaveStyle(dimensions);
+
+        await user.click(screen.getByRole('button', { name: labels.collapse }));
+        expect(input).toBeInTheDocument();
+        expect(input).not.toBeVisible();
+        expect(container.querySelector('.tedi-dock-panel__resizer')).toHaveStyle(dimensions);
+
+        await user.click(screen.getByRole('button', { name: labels.expand }));
+        rerender(
+          <DockPanel {...props} title="Updated details">
+            <Editor />
+          </DockPanel>
+        );
+        expect(screen.getByRole('textbox')).toBe(input);
+        expect(input).toHaveValue('Keep resized changes');
+        expect(input).toBeVisible();
+        expect(container.querySelector('.tedi-dock-panel__resizer')).toHaveStyle(dimensions);
+      }
+    );
   });
 
   describe('density and dimension presets', () => {
@@ -453,7 +807,6 @@ describe('DockPanel', () => {
       );
       const panel = screen.getByRole('region');
       expect(panel).toHaveAttribute('data-size', 'default');
-      expect(panel).not.toHaveAttribute('size');
     });
 
     it.each(['small', 'default'] as const)('supports %s density independently of dimensions', (size) => {
@@ -464,7 +817,7 @@ describe('DockPanel', () => {
       );
       const panel = screen.getByRole('region');
       expect(panel).toHaveAttribute('data-size', size);
-      expect(panel).not.toHaveAttribute('size');
+      expect(screen.getByRole('heading', { name: 'Details', level: size === 'small' ? 4 : 3 })).toBeInTheDocument();
       expect(panel.style.getPropertyValue('--dock-panel-width')).toBe('420px');
       expect(panel.style.getPropertyValue('--dock-panel-height')).toBe('70%');
     });
@@ -484,7 +837,6 @@ describe('DockPanel', () => {
         );
         const panel = screen.getByRole('region');
         expect(panel.style.getPropertyValue('--dock-panel-width')).toBe(expected);
-        expect(panel).not.toHaveAttribute('width');
       });
     });
 
@@ -535,7 +887,6 @@ describe('DockPanel', () => {
       );
       const panel = screen.getByRole('region');
       expect(panel.style.getPropertyValue('--dock-panel-height')).toBe(expected);
-      expect(panel).not.toHaveAttribute('height');
     });
 
     it.each<DockPanelPlacement>(['left', 'right', 'top', 'bottom'])(
@@ -562,6 +913,47 @@ describe('DockPanel', () => {
       expect(panel.style.getPropertyValue('--dock-panel-max-height')).toBe('90%');
     });
 
+    it('converts zero dimensions to pixels', () => {
+      render(
+        <DockPanel title="Details" labels={labels} width={0} height={0} maxHeight={0}>
+          Content
+        </DockPanel>
+      );
+      const panel = screen.getByRole('region');
+      expect(panel.style.getPropertyValue('--dock-panel-width')).toBe('0px');
+      expect(panel.style.getPropertyValue('--dock-panel-height')).toBe('0px');
+      expect(panel.style.getPropertyValue('--dock-panel-max-height')).toBe('0px');
+    });
+
+    it('overrides style dimensions only while dimension props are supplied', () => {
+      const style = {
+        color: 'red',
+        '--dock-panel-width': '10rem',
+        '--dock-panel-height': '20rem',
+        '--dock-panel-max-height': '30rem',
+      };
+      const { rerender } = render(
+        <DockPanel title="Details" labels={labels} style={style} width="sm" height={360} maxHeight="90%">
+          Content
+        </DockPanel>
+      );
+      const panel = screen.getByRole('region');
+      expect(panel.style.getPropertyValue('--dock-panel-width')).toBe('35%');
+      expect(panel.style.getPropertyValue('--dock-panel-height')).toBe('360px');
+      expect(panel.style.getPropertyValue('--dock-panel-max-height')).toBe('90%');
+      expect(panel.style.color).toBe('red');
+
+      rerender(
+        <DockPanel title="Details" labels={labels} style={style}>
+          Content
+        </DockPanel>
+      );
+      expect(panel.style.getPropertyValue('--dock-panel-width')).toBe('10rem');
+      expect(panel.style.getPropertyValue('--dock-panel-height')).toBe('20rem');
+      expect(panel.style.getPropertyValue('--dock-panel-max-height')).toBe('30rem');
+      expect(panel.style.color).toBe('red');
+    });
+
     it('updates presets and density without resetting child state', async () => {
       const user = userEvent.setup();
       const { rerender } = render(
@@ -660,10 +1052,8 @@ describe('DockPanel revised controls and composition', () => {
 
 describe('DockPanelLayout', () => {
   it('puts the panel and workspace in separate sibling elements', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(
+    const { container } = render(
       <DockPanelLayout
-        ref={ref}
         panel={
           <DockPanel title="Details" labels={labels}>
             Panel content
@@ -675,9 +1065,8 @@ describe('DockPanelLayout', () => {
     );
     const content = screen.getByText('Workspace content').parentElement;
     const panel = screen.getByRole('region', { name: 'Details' });
-    expect(content).toHaveAttribute('data-dock-panel-layout-content');
-    expect(content?.parentElement).toBe(ref.current);
-    expect(panel.parentElement).toBe(ref.current);
+    expect(content?.parentElement).toBe(container.firstChild);
+    expect(panel.parentElement).toBe(container.firstChild);
     expect(content).not.toContainElement(panel);
   });
 
diff --git a/src/community/components/dock-panel/dock-panel.stories.tsx b/src/community/components/dock-panel/dock-panel.stories.tsx
index ca2148997..0303a05fa 100644
--- a/src/community/components/dock-panel/dock-panel.stories.tsx
+++ b/src/community/components/dock-panel/dock-panel.stories.tsx
@@ -5,15 +5,7 @@ import { useArgs } from 'storybook/preview-api';
 import { Button } from '../../../tedi/components/buttons/button/button';
 import { TextField } from '../../../tedi/components/form/textfield/textfield';
 import { Col, Row } from '../../../tedi/components/layout/grid';
-import { Resizer } from '../map-components/resizer/resizer';
-import {
-  DockPanel,
-  DockPanelDimensionPreset,
-  DockPanelLabels,
-  DockPanelLayout,
-  DockPanelPlacement,
-  DockPanelProps,
-} from './dock-panel';
+import { DockPanel, DockPanelDimensionPreset, DockPanelLabels, DockPanelLayout, DockPanelProps } from './dock-panel';
 
 const labels: DockPanelLabels = {
   collapse: 'Minimize panel',
@@ -77,7 +69,6 @@ const Workspace = ({ children, height = '36rem' }: { children: ReactNode; height
   const [count, setCount] = useState(0);
   return (
     <DockPanelLayout
-      data-dock-panel-workspace=""
       panel={children}
       style={{
         height,
@@ -205,13 +196,13 @@ There is no dimmed backdrop, background click interception, focus trap or body-s
 Opening is owned by the application: render the panel to show it, remove it to close it.
 Minimizing leaves a restore strip and **keeps the content mounted**.
 The four inward arrows (\`zoom_in_map\`) minimize; four outward arrows (\`zoom_out_map\`) restore the
-configured size, **not fullscreen**. Collapsed side titles read bottom-to-top in smaller text.
+configured or resized size, **not fullscreen**. Collapsed side titles read bottom-to-top in smaller text.
 
 ### Required props
 
 | Prop | Purpose |
 | --- | --- |
-| \`title\` | Visible heading and default accessible name. |
+| \`title\` | Visible heading and accessible name. |
 | \`children\` | Any application-provided React content. |
 | \`labels\` | Translated button names: \`{ collapse, expand, close }\`. All three strings are required by this API. |
 
@@ -242,21 +233,25 @@ They do not select a width or height and do not shrink the application-provided
 
 Width and height use the **same DockPanel percentage scale**, not fixed-pixel Modal width tokens.
 An \`xl\` side panel leaves 20% of the workspace visible beside it, just as an \`xl\` top/bottom panel
-leaves 20% above or below it. Presets resize proportionally with their containing workspace.
+leaves 20% above or below it. Without resizing enabled, presets resize proportionally with their containing workspace.
 You can still use numbers (pixels), CSS lengths and percentages, or \`height="auto"\`.
 Use \`width="100%"\` or \`height="100%"\` explicitly when the full available dimension is intended.
 Omitted dimensions use side width \`xs\` (25%), side height 100%, and top/bottom height 50%.
 Width is ignored for top/bottom panels, which fill the workspace width.
 Custom dimensions remain capped by the workspace but are not restricted to the preset scale.
 
+Enable \`resizable\` to drag the edge facing the workspace. The configured preset or custom dimension
+is measured once to initialize Resizer in pixels. The initial workspace dimensions provide its maximum
+bounds. Minimize/restore preserves the resized dimensions and mounted content; closing and remounting
+starts again from the configured size.
+
 ### Content height and containment
 
 DockPanelLayout needs a defined height, either through its parent or its own style/class.
 It is a layout-only companion, not a map component. Its required \`children\` are the underlying workspace;
 its optional \`panel\` is a DockPanel or a layout-aware wrapper containing it. Omit the panel to close it.
 When minimized, it reserves exactly the rail width/height. A custom wrapper must participate in the grid
-when collapsed rather than remain absolutely positioned. The Resizer examples demonstrate this with a
-story-owned layout wrapper and the unchanged Community Resizer.
+when collapsed rather than remain absolutely positioned. DockPanel handles this when \`resizable\` is enabled.
 A canvas-based map may need its own documented resize/update call when its container changes size.
 \`height="auto" maxHeight="calc(100% - 4rem)"\` keeps background visible below a side panel.
 At the height limit, only the body scrolls; the header and footer remain outside that scrolling area.
@@ -272,29 +267,33 @@ The minimize/restore button exposes \`aria-expanded\` and \`aria-controls\`; hid
 Minimize/restore and Close remain grouped, including in the minimized rail.
 Example footers contain **Cancel** and **Save** buttons. Cancel closes the example; Save only updates a
 local demo status (no backend call). Footer state survives minimization. All actions remain application-owned.
-Standard div attributes and a forwarded div ref are supported. Use \`headingElement\` for the correct heading level.
+Use \`id\` to connect external controls, \`className\`/\`style\` for styling, and \`headingElement\` for the heading level.
+The required title names the panel.
 
 ### Examples
 
 Like the TEDI-Ready Modal documentation, examples begin with **opening buttons** rather than permanently open panels.
 **Size**, **Width** and **Height** let you compare variants. **Position** demonstrates all four edges,
 including their minimized layouts: use the header controls rather than separate minimized examples.
-The remaining examples cover custom dimensions, content height, overflow, controlled state
-and composition with the existing Community Resizer.
+The remaining examples cover custom dimensions, content height, overflow, controlled state,
+external minimization through \`minimizeCounter\` and resizing through \`resizable\`.
 The default preview also provides live Controls. Select a story's Canvas for more preview space.
 `;
 
 const publicProps = [
   'title',
+  'description',
   'children',
   'labels',
   'placement',
   'size',
+  'resizable',
   'width',
   'height',
   'maxHeight',
   'collapsed',
   'defaultCollapsed',
+  'minimizeCounter',
   'onCollapsedChange',
   'onClose',
   'headerActions',
@@ -303,8 +302,6 @@ const publicProps = [
   'id',
   'className',
   'style',
-  'aria-labelledby',
-  'aria-describedby',
 ];
 
 const meta = {
@@ -327,9 +324,20 @@ const meta = {
     title: {
       control: 'text',
       type: { name: 'string', required: true },
-      description: 'Required. Visible heading and default accessible name.',
+      description: 'Required. Visible heading and accessible name.',
       table: { category: 'Required props', type: { summary: 'string' } },
     },
+    description: {
+      control: 'text',
+      description:
+        'Text below the title, styled like Modal.Header. Hidden while minimized; omitted or empty text adds no spacing.',
+      table: {
+        category: 'Optional props',
+        subcategory: 'Content',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
     children: {
       control: false,
       type: { name: 'other', value: 'ReactNode', required: true },
@@ -358,6 +366,12 @@ const meta = {
         'Optional. Panel density, independent of width/height. Uses TEDI Modal padding tokens. The title defaults to h3 for default and h4 for small, unless headingElement is supplied.',
       table: { category: 'Optional props', subcategory: 'Layout', defaultValue: { summary: 'default' } },
     },
+    resizable: {
+      control: 'boolean',
+      description:
+        'Enables dragging the workspace-facing edge. The configured dimension supplies the initial pixel size; minimize/restore preserves the resized dimensions.',
+      table: { category: 'Optional props', subcategory: 'Layout', defaultValue: { summary: 'false' } },
+    },
     width: {
       control: 'text',
       description:
@@ -407,10 +421,21 @@ const meta = {
         'Optional. Initial internal state only; ignored when collapsed is supplied. In examples it is reapplied on opening, not while editing an open panel.',
       table: { category: 'Optional props', subcategory: 'State', defaultValue: { summary: 'false' } },
     },
+    minimizeCounter: {
+      control: 'number',
+      description:
+        'Application-owned minimize counter. The initial value is ignored. Changes in either direction request minimization only while expanded; unchanged values do nothing. Restoring does not require changing the counter. In controlled mode, apply onCollapsedChange(true).',
+      table: {
+        category: 'Optional props',
+        subcategory: 'State',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
     onCollapsedChange: {
       control: false,
       description:
-        'Optional. Requests/notifies the next minimized state. In controlled mode, update collapsed with this value.',
+        'Receives the next minimized state requested by the toggle or minimizeCounter. In controlled mode, update collapsed with this value.',
       table: {
         category: 'Optional props',
         subcategory: 'Events',
@@ -432,7 +457,7 @@ const meta = {
     headerActions: {
       control: false,
       description:
-        'Optional. React content before the grouped minimize/restore and Close controls. Hidden while minimized.',
+        'React content before the grouped minimize/restore and Close controls. Hidden but kept mounted while minimized.',
       table: {
         category: 'Optional props',
         subcategory: 'Content',
@@ -473,26 +498,6 @@ const meta = {
         defaultValue: { summary: 'Generated unique id' },
       },
     },
-    'aria-labelledby': {
-      control: 'text',
-      description: 'Optional. Override the labelling element id. Normally the panel wires its own title automatically.',
-      table: {
-        category: 'Optional props',
-        subcategory: 'Accessibility',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Panel title id' },
-      },
-    },
-    'aria-describedby': {
-      control: 'text',
-      description: 'Optional. Id of additional descriptive text, supplied by the application.',
-      table: {
-        category: 'Optional props',
-        subcategory: 'Accessibility',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
     className: {
       control: 'text',
       description: 'Optional. Additional class names on the panel root.',
@@ -525,7 +530,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { onClose: undefined },
+  args: { onClose: undefined, description: 'Additional information about this item.' },
   render: function Render(args) {
     const [, updateArgs] = useArgs<DockPanelProps>();
     return <PanelExample args={args} closable={false} onStateChange={(collapsed) => updateArgs({ collapsed })} />;
@@ -552,6 +557,7 @@ export function Example() {
       <DockPanelLayout style={{ height: '36rem' }} panel={open ? (
         <DockPanel
           title="Details"
+          description="Additional information about this item."
           labels={{ collapse: 'Minimize panel', expand: 'Restore panel', close: 'Close panel' }}
           footer={<Button visualType="secondary" onClick={() => setOpen(false)}>Cancel</Button>}
         >
@@ -909,6 +915,7 @@ const usePanelVisibility = (onClose: DockPanelProps['onClose']) => {
 
 const ControlledExample = (args: DockPanelProps) => {
   const [collapsed, setCollapsed] = useState(false);
+  const [minimizeCounter, setMinimizeCounter] = useState(0);
   const [message, setMessage] = useState('No header action yet.');
   const { open, setOpen, openButtonRef, handleClose } = usePanelVisibility(args.onClose);
 
@@ -930,8 +937,8 @@ const ControlledExample = (args: DockPanelProps) => {
         >
           Open / restore panel
         </Button>
-        <Button visualType="secondary" disabled={!open} onClick={() => setCollapsed(true)}>
-          Minimize from the application
+        <Button visualType="secondary" disabled={!open} onClick={() => setMinimizeCounter((counter) => counter + 1)}>
+          Minimize panel
         </Button>
       </div>
       {open && (
@@ -939,6 +946,7 @@ const ControlledExample = (args: DockPanelProps) => {
           <DockPanel
             {...args}
             collapsed={collapsed}
+            minimizeCounter={minimizeCounter}
             onCollapsedChange={handleCollapsedChange}
             onClose={handleClose}
             headerActions={
@@ -956,194 +964,37 @@ const ControlledExample = (args: DockPanelProps) => {
 ControlledExample.displayName = 'DockPanelControlledExample';
 
 export const Controlled: Story = {
-  argTypes: { collapsed: { control: false }, defaultCollapsed: { control: false } },
+  argTypes: {
+    collapsed: { control: false },
+    defaultCollapsed: { control: false },
+    minimizeCounter: { control: false },
+  },
   render: (args) => <ControlledExample {...args} />,
   parameters: {
     docs: {
       description: {
         story:
-          'The application controls collapsed state and dismissal. Minimizing preserves child state. ' +
-          'Closing unmounts the panel in this example, so reopening creates fresh child state.',
+          'The external Minimize panel button increments minimizeCounter. DockPanel requests onCollapsedChange(true), ' +
+          'and this example applies it to controlled collapsed state. Restore using the panel control or Open / restore panel; ' +
+          'the counter does not need to change. Minimize again while already minimized to verify that it stays minimized. ' +
+          'Minimizing preserves child state. Closing unmounts the panel, so reopening creates fresh child state.',
       },
     },
   },
 };
 
-// Resize from the edge facing into the workspace, not the docked edge.
-const resizeHandlePositions: Record<DockPanelPlacement, DockPanelPlacement> = {
-  right: 'left',
-  left: 'right',
-  bottom: 'top',
-  top: 'bottom',
-};
-
-// These classes belong to this example. Resizer's handle, indicator, styles and
-// mouse listeners remain untouched. Its public className only controls flex placement.
-const resizableExampleStyles = `
-.dock-panel-resizer-demo {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-  pointer-events: none;
-}
-.dock-panel-resizer-demo__resizer {
-  flex: 0 1 auto;
-  min-width: 0;
-  min-height: 0;
-  max-width: 100%;
-  max-height: 100%;
-  pointer-events: auto;
-}
-.dock-panel-resizer-demo__content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.dock-panel-resizer-demo__panel {
-  pointer-events: auto;
-}
-.dock-panel-resizer-demo[data-placement='right'] {
-  justify-content: flex-end;
-}
-.dock-panel-resizer-demo[data-placement='left'] {
-  justify-content: flex-start;
-}
-.dock-panel-resizer-demo[data-placement='top'] .dock-panel-resizer-demo__resizer,
-.dock-panel-resizer-demo[data-placement='bottom'] .dock-panel-resizer-demo__resizer {
-  flex: 1 1 0;
-}
-.dock-panel-resizer-demo[data-placement='top'] .dock-panel-resizer-demo__resizer {
-  align-self: flex-start;
-}
-.dock-panel-resizer-demo[data-placement='bottom'] .dock-panel-resizer-demo__resizer {
-  align-self: flex-end;
-}
-.dock-panel-resizer-demo[data-collapsed='true'] {
-  position: relative;
-  inset: auto;
-  overflow: clip;
-}
-.dock-panel-resizer-demo[data-collapsed='true'] .dock-panel-resizer-demo__resizer {
-  max-width: none;
-  max-height: none;
-  pointer-events: none;
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='left'],
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='right'] {
-  width: var(--dock-panel-rail-size);
-  height: 100%;
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='left'] .dock-panel-resizer-demo__resizer,
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='right'] .dock-panel-resizer-demo__resizer {
-  flex: 0 0 auto;
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='left'] {
-  grid-area: 2 / 1;
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='right'] {
-  grid-area: 2 / 3;
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='top'],
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='bottom'] {
-  width: 100%;
-  height: var(--dock-panel-rail-size);
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='top'] {
-  grid-area: 1 / 1 / 2 / 4;
-}
-.dock-panel-resizer-demo[data-collapsed='true'][data-placement='bottom'] {
-  grid-area: 3 / 1 / 4 / 4;
-}
-`;
-
-const ResizableExample = (args: DockPanelProps) => {
-  const { placement = 'right', defaultCollapsed = false, onCollapsedChange } = args;
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const { open, setOpen, openButtonRef, handleClose } = usePanelVisibility(args.onClose);
-
-  const handleCollapsedChange = (next: boolean): void => {
-    setCollapsed(next);
-    onCollapsedChange?.(next);
-  };
-
-  return (
-    <div style={{ display: 'grid', gap: 'var(--tedi-dimensions-08)' }}>
-      <style>{resizableExampleStyles}</style>
-      <div>
-        <Button
-          visualType="secondary"
-          ref={openButtonRef}
-          onClick={() => {
-            setOpen(true);
-            setCollapsed(false);
-          }}
-        >
-          Open / restore panel
-        </Button>
-      </div>
-      {open && (
-        <Workspace>
-          <div className="dock-panel-resizer-demo" data-placement={placement} data-collapsed={collapsed}>
-            <Resizer
-              className="dock-panel-resizer-demo__resizer"
-              handlePosition={resizeHandlePositions[placement]}
-              initialWidth={480}
-              minWidth={320}
-              maxWidth={800}
-              initialHeight={320}
-              minHeight={160}
-              maxHeight={520}
-              showIndicator={false}
-            >
-              <div className="dock-panel-resizer-demo__content">
-                <DockPanel
-                  {...args}
-                  className={['dock-panel-resizer-demo__panel', args.className].filter(Boolean).join(' ')}
-                  placement={placement}
-                  width="100%"
-                  height="100%"
-                  maxHeight="100%"
-                  collapsed={collapsed}
-                  onCollapsedChange={handleCollapsedChange}
-                  onClose={handleClose}
-                  footer={args.footer === undefined ? <ExampleFooter onCancel={handleClose} /> : args.footer}
-                />
-              </div>
-            </Resizer>
-          </div>
-        </Workspace>
-      )}
-    </div>
-  );
-};
-ResizableExample.displayName = 'DockPanelResizableExample';
-
 export const ResizeWidth: Story = {
   name: 'Resize width',
-  args: { placement: 'right', title: 'Resizable details' },
-  // Resizer owns the dimensions in this example; DockPanel fills its container.
-  argTypes: {
-    collapsed: { control: false },
-    defaultCollapsed: { control: false },
-    width: { control: false },
-    height: { control: false },
-    maxHeight: { control: false },
-  },
-  render: (args) => <ResizableExample {...args} />,
+  args: { placement: 'right', title: 'Resizable details', resizable: true, width: 'md' },
+  argTypes: { collapsed: { control: false } },
+  render: (args) => <PanelExample args={args} />,
   parameters: {
     docs: {
       description: {
         story:
-          'Uses the unchanged Community Resizer in its Drag Indicator mode (showIndicator=false). Drag the LEFT edge of the right-docked panel. ' +
-          'Initial width: 480px; limits: 320–800px, constrained to the workspace width. ' +
-          'The panel fills the workspace height. Minimizing keeps both components mounted, preserving ' +
-          'the resized width and child state. Closing removes the panel and resize handle; reopening resets the size. ' +
-          'The small tab, hover accent and mouse-drag behaviour are exactly those of Resizer’s existing Drag Indicator story. ' +
-          'No ribbon is forced on permanently. The story does not change Resizer or its internal styles. ' +
-          'While minimized, the story-owned wrapper reserves a grid track and clips the unused expanded area and resize edge; the panel and Resizer stay mounted.',
+          'Drag the left edge of the right-docked panel. width="md" starts at 50% of the workspace width; dragging then uses pixels. ' +
+          'Edit the form, resize, then minimize and restore to check that both the content and resized width are preserved. ' +
+          'The minimized rail reserves workspace space and hides the resize handle. Closing and reopening resets the size.',
       },
     },
   },
@@ -1151,26 +1002,16 @@ export const ResizeWidth: Story = {
 
 export const ResizeHeight: Story = {
   name: 'Resize height',
-  args: { placement: 'bottom', title: 'Resizable details' },
-  argTypes: {
-    collapsed: { control: false },
-    defaultCollapsed: { control: false },
-    width: { control: false },
-    height: { control: false },
-    maxHeight: { control: false },
-  },
-  render: (args) => <ResizableExample {...args} />,
+  args: { placement: 'bottom', title: 'Resizable details', resizable: true, height: 'md' },
+  argTypes: { collapsed: { control: false } },
+  render: (args) => <PanelExample args={args} />,
   parameters: {
     docs: {
       description: {
         story:
-          'Uses the unchanged Community Resizer in its Drag Indicator mode (showIndicator=false). Drag the TOP edge of the bottom-docked panel. ' +
-          'Initial height: 320px; limits: 160–520px, constrained to the workspace height. ' +
-          'The panel fills the workspace width. Minimizing keeps both components mounted, preserving ' +
-          'the resized height and child state. Closing removes the panel and resize handle; reopening resets the size. ' +
-          'The small tab, hover accent and mouse-drag behaviour are exactly those of Resizer’s existing Drag Indicator story. ' +
-          'No ribbon is forced on permanently. The story does not change Resizer or its internal styles. ' +
-          'While minimized, the story-owned wrapper reserves a grid track and clips the unused expanded area and resize edge; the panel and Resizer stay mounted.',
+          'Drag the top edge of the bottom-docked panel. height="md" starts at 50% of the workspace height; dragging then uses pixels. ' +
+          'Edit the form, resize, then minimize and restore to check that both the content and resized height are preserved. ' +
+          'The minimized rail reserves workspace space and hides the resize handle. Closing and reopening resets the size.',
       },
     },
   },
diff --git a/src/community/components/dock-panel/dock-panel.tsx b/src/community/components/dock-panel/dock-panel.tsx
index 0a2e8a83e..7c523bb76 100644
--- a/src/community/components/dock-panel/dock-panel.tsx
+++ b/src/community/components/dock-panel/dock-panel.tsx
@@ -1,31 +1,39 @@
 'use client';
 
 import cn from 'classnames';
-import { CSSProperties, forwardRef, HTMLAttributes, ReactNode, useEffect, useId, useRef, useState } from 'react';
+import { CSSProperties, JSX, ReactNode, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 
 import { Heading, HeadingProps } from '../../../tedi/components/base/typography/heading/heading';
 import { Button } from '../../../tedi/components/buttons/button/button';
+import { Resizer } from '../map-components/resizer/resizer';
 import styles from './dock-panel.module.scss';
 
 export type DockPanelPlacement = 'left' | 'right' | 'top' | 'bottom';
 export type DockPanelSize = 'default' | 'small';
-export type DockPanelDimensionPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Percentages of the workspace dimension: xs=25%, sm=35%, md=50%, lg=65%, xl=80%. */
+export type DockPanelDimensionPreset = keyof typeof DIMENSION_PERCENTAGES;
 export type DockPanelWidth = DockPanelDimensionPreset | CSSProperties['width'];
 export type DockPanelHeight = DockPanelDimensionPreset | CSSProperties['height'];
 
-const DIMENSION_PRESETS: readonly DockPanelDimensionPreset[] = ['xs', 'sm', 'md', 'lg', 'xl'];
-const DIMENSION_PERCENTAGES: Record<DockPanelDimensionPreset, string> = {
+const DIMENSION_PERCENTAGES = {
   xs: '25%',
   sm: '35%',
   md: '50%',
   lg: '65%',
   xl: '80%',
+} as const;
+
+const resizeHandleByPlacement: Record<DockPanelPlacement, DockPanelPlacement> = {
+  left: 'right',
+  right: 'left',
+  top: 'bottom',
+  bottom: 'top',
 };
 
 const isDimensionPreset = (value: DockPanelWidth | DockPanelHeight): value is DockPanelDimensionPreset =>
-  typeof value === 'string' && (DIMENSION_PRESETS as readonly string[]).includes(value);
+  typeof value === 'string' && Object.prototype.hasOwnProperty.call(DIMENSION_PERCENTAGES, value);
 
-const getCssDimension = (value: DockPanelWidth | DockPanelHeight): string | undefined => {
+const resolveCssDimension = (value: DockPanelWidth | DockPanelHeight): string | undefined => {
   if (isDimensionPreset(value)) {
     return DIMENSION_PERCENTAGES[value];
   }
@@ -38,110 +46,118 @@ const getCssDimension = (value: DockPanelWidth | DockPanelHeight): string | unde
 };
 
 export interface DockPanelLabels {
-  /** Accessible name for the minimize button. Supply translated text. */
+  /** Accessible name for the minimize button. */
   collapse: string;
-  /** Accessible name for the restore button. Supply translated text. */
+  /** Accessible name for the restore button. */
   expand: string;
-  /** Accessible name for the optional close button. Supply translated text. */
+  /** Accessible name for the close button. */
   close: string;
 }
 
-export interface DockPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
-  /** Required. Visible heading and default accessible name of the panel. */
+export interface DockPanelProps {
+  /** Visible heading and accessible name. */
   title: string;
-  /** Required. Application-provided React content. Kept mounted while minimized. */
+  /** Text below the title, hidden while minimized. Omitted or empty text adds no spacing. */
+  description?: string;
+  /** Panel content, kept mounted while minimized. */
   children: ReactNode;
-  /**
-   * Required. Translated accessible button names: { collapse, expand, close }.
-   * All three strings are required by this interface, including close when onClose is omitted.
-   * Providing labels.close alone does not display a close button.
-   */
+  /** Translated accessible names for the panel controls. */
   labels: DockPanelLabels;
   /**
-   * Optional. Edge of the containing workspace, not necessarily the browser viewport.
-   * Place the panel in DockPanelLayout to overlay when expanded and reserve space when minimized.
+   * Edge of the containing workspace.
    * @default right
    */
   placement?: DockPanelPlacement;
   /**
-   * Optional. Panel density, using TEDI Modal padding tokens for the header, content and footer.
-   * The title defaults to h3 for default and h4 for small, including its text size when expanded.
-   * Set headingElement to override both. Minimized titles always use compact text.
-   * This is independent of width/height: small does not mean a narrower panel.
+   * Header, content and footer padding using TEDI Modal density tokens, independent of dimensions.
    * @default default
    */
   size?: DockPanelSize;
   /**
-   * Optional. Controlled minimized state. Supply onCollapsedChange and apply the requested value.
-   * When omitted, the component manages its own state, initialized from defaultCollapsed.
+   * Enables resizing from the workspace-facing edge.
+   * The configured width/height supplies the initial size; dragging then uses pixels.
+   * Minimize/restore preserves content and resized dimensions.
+   * @default false
+   */
+  resizable?: boolean;
+  /**
+   * Controlled minimized state. Apply changes requested by onCollapsedChange.
+   * Omit to use internal state initialized from defaultCollapsed.
    */
   collapsed?: boolean;
   /**
-   * Optional. Initial minimized state in uncontrolled mode; ignored when collapsed is supplied.
-   * Changes after mounting do not reset the state.
+   * Initial uncontrolled minimized state; ignored when collapsed is supplied.
+   * Later changes have no effect.
    * @default false
    */
   defaultCollapsed?: boolean;
-  /** Optional. Requests/notifies a minimize/restore change. Receives the next collapsed value. */
+  /**
+   * Application-owned minimize counter. The initial value is ignored.
+   * Later changes request minimization only while expanded.
+   * In controlled mode, the parent applies onCollapsedChange(true).
+   */
+  minimizeCounter?: number;
+  /** Receives the next minimized state requested by the toggle or minimizeCounter. */
   onCollapsedChange?: (collapsed: boolean) => void;
   /**
-   * Optional. Displays the close button and requests dismissal when clicked.
-   * The application owns removal, unsaved-change confirmation and focus restoration.
-   * Omit this callback to hide the close button. Closing is separate from minimizing.
+   * Shows the close button and requests dismissal without changing the minimized state.
+   * The application handles removal, unsaved-change confirmation and focus restoration.
    */
   onClose?: () => void;
-  /** Optional. React content before the grouped panel controls. Hidden, not unmounted, when minimized. */
+  /** Content before the controls. Hidden but kept mounted while minimized. */
   headerActions?: ReactNode;
-  /** Optional. React content below the scrolling body. Hidden, not unmounted, when minimized. */
+  /** Content below the scroll area. Hidden but kept mounted while minimized. */
   footer?: ReactNode;
   /**
-   * Optional. Expanded width for left/right placement; ignored for top/bottom.
-   * Presets share the height scale: xs=25%, sm=35%, md=50%, lg=65%, xl=80% of workspace width.
-   * Every named preset leaves some workspace visible beside the panel, including xl.
-   * Also accepts a CSS length or a number in pixels, limited to the workspace width.
-   * Use 100% explicitly to fill the workspace. An omitted width defaults to xs (25%) via CSS.
+   * Expanded width for left/right placement; ignored for top/bottom.
+   * Accepts presets, CSS lengths or pixel numbers, limited to the workspace width.
    * @default xs
    */
   width?: DockPanelWidth;
   /**
-   * Optional. Expanded height for any placement. Numbers mean pixels; CSS lengths and auto work too.
-   * Presets share the width scale: xs=25%, sm=35%, md=50%, lg=65%, xl=80% of workspace height.
-   * Named presets leave workspace visible; use 100% explicitly for the full available height.
-   * Defaults to 100% for left/right and 50% for top/bottom.
-   * Use auto for content height, with maxHeight to leave background visible underneath.
-   * A minimized side rail keeps an explicit height, or fits its title and controls for auto.
+   * Expanded height for any placement. Accepts presets, CSS lengths, pixel numbers or auto.
+   * Use auto with maxHeight for content height with a scrolling limit.
+   * Minimized side rails keep an explicit height or fit their content with auto.
+   * @default 100% for left/right; 50% for top/bottom
    */
   height?: DockPanelHeight;
   /**
-   * Optional. Maximum height as a CSS length or number in pixels; not a preset.
-   * For example, calc(100% - 4rem) reserves space below a side panel.
-   * At the limit, the body scrolls while the header and footer remain visible.
+   * Maximum height as a CSS length or pixel number, without presets.
+   * Content scrolls at this limit while the header and footer remain visible.
    * @default 100%
    */
   maxHeight?: CSSProperties['maxHeight'];
   /**
-   * Optional. Overrides the title's HTML heading tag and expanded text size.
-   * When omitted, uses h3 for default and h4 for small. Minimized titles always use compact text.
+   * Title heading tag and expanded text size. Minimized titles always use compact text.
    * @default h3 (h4 when size is small)
    */
   headingElement?: HeadingProps['element'];
+  /** Panel id for external controls. Generated when omitted. */
+  id?: string;
+  /** Additional panel class names. */
+  className?: string;
+  /** Panel styles, including stacking order and CSS custom properties. */
+  style?: CSSProperties;
 }
 
-type PanelStyle = CSSProperties & {
+type DockPanelStyle = CSSProperties & {
   '--dock-panel-width'?: string;
   '--dock-panel-height'?: string;
   '--dock-panel-max-height'?: string;
 };
 
-export const DockPanel = forwardRef<HTMLDivElement, DockPanelProps>((props, ref) => {
+export const DockPanel = (props: DockPanelProps): JSX.Element => {
   const {
     title,
+    description,
     children,
     labels,
     placement = 'right',
     size = 'default',
+    resizable = false,
     collapsed,
     defaultCollapsed = false,
+    minimizeCounter,
     onCollapsedChange,
     onClose,
     headerActions,
@@ -153,7 +169,6 @@ export const DockPanel = forwardRef<HTMLDivElement, DockPanelProps>((props, ref)
     id,
     className,
     style,
-    ...rest
   } = props;
 
   const generatedId = useId();
@@ -163,172 +178,202 @@ export const DockPanel = forwardRef<HTMLDivElement, DockPanelProps>((props, ref)
   const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
   const isControlled = collapsed !== undefined;
   const isCollapsed = collapsed ?? internalCollapsed;
-  const toggleButtonRef = useRef<HTMLButtonElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const headerActionsRef = useRef<HTMLDivElement>(null);
-
-  // Remember focus before React hides the body, including programmatic collapse.
-  // A document-level listener also notices focus moving outside this panel.
-  const focusWasInCollapsibleAreaRef = useRef(false);
-  useEffect(() => {
-    const ownerDocument = toggleButtonRef.current?.ownerDocument;
-    if (!ownerDocument) return;
-
-    const handleDocumentFocusIn = (): void => {
-      const activeElement = ownerDocument.activeElement;
-      const isFocusInCollapsibleArea = Boolean(
-        activeElement && (bodyRef.current?.contains(activeElement) || headerActionsRef.current?.contains(activeElement))
-      );
-      // Hiding a focused element can temporarily move focus to the document body.
-      // Preserve the previous location in that case until the restore button is focused.
-      if (isFocusInCollapsibleArea || activeElement !== ownerDocument.body || !bodyRef.current?.hidden) {
-        focusWasInCollapsibleAreaRef.current = isFocusInCollapsibleArea;
-      }
-    };
+  const previousMinimizeCounter = useRef(minimizeCounter);
+  const resizeMeasurementRef = useRef<HTMLDivElement>(null);
+  const [initialResizeMeasurements, setInitialResizeMeasurements] = useState<{
+    width: number;
+    height: number;
+    maxWidth: number;
+    maxHeight: number;
+  }>();
 
-    const handleDocumentFocusOut = (): void => {
-      if (!bodyRef.current?.hidden) focusWasInCollapsibleAreaRef.current = false;
-    };
-
-    handleDocumentFocusIn();
-    ownerDocument.addEventListener('focusin', handleDocumentFocusIn);
-    ownerDocument.addEventListener('focusout', handleDocumentFocusOut);
-    return () => {
-      ownerDocument.removeEventListener('focusin', handleDocumentFocusIn);
-      ownerDocument.removeEventListener('focusout', handleDocumentFocusOut);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isCollapsed && focusWasInCollapsibleAreaRef.current) {
-      toggleButtonRef.current?.focus();
-      focusWasInCollapsibleAreaRef.current = false;
+  useLayoutEffect(() => {
+    if (resizable && !initialResizeMeasurements && resizeMeasurementRef.current) {
+      const measurement = resizeMeasurementRef.current;
+      const { width, height } = measurement.getBoundingClientRect();
+      const workspace = measurement.offsetParent as HTMLElement;
+      setInitialResizeMeasurements({
+        width,
+        height,
+        maxWidth: workspace.clientWidth,
+        maxHeight: workspace.clientHeight,
+      });
     }
-  }, [isCollapsed]);
+  }, [resizable, initialResizeMeasurements]);
 
-  const handleToggle = (): void => {
+  const handleCollapseToggle = (): void => {
     const nextCollapsed = !isCollapsed;
-    // Some browsers do not focus a button on pointer activation.
-    toggleButtonRef.current?.focus();
     if (!isControlled) setInternalCollapsed(nextCollapsed);
     onCollapsedChange?.(nextCollapsed);
   };
 
-  const panelStyle: PanelStyle = { ...style };
+  useEffect(() => {
+    if (previousMinimizeCounter.current !== minimizeCounter) {
+      previousMinimizeCounter.current = minimizeCounter;
+      if (!isCollapsed) {
+        if (!isControlled) setInternalCollapsed(true);
+        onCollapsedChange?.(true);
+      }
+    }
+  }, [minimizeCounter, isCollapsed, isControlled, onCollapsedChange]);
+
+  const panelStyle: DockPanelStyle = { ...style, zIndex: resizable ? undefined : style?.zIndex };
   if (width !== undefined) {
-    panelStyle['--dock-panel-width'] = getCssDimension(width);
+    panelStyle['--dock-panel-width'] = resolveCssDimension(width);
   }
   if (height !== undefined) {
-    panelStyle['--dock-panel-height'] = getCssDimension(height);
+    panelStyle['--dock-panel-height'] = resolveCssDimension(height);
   }
   if (maxHeight !== undefined) {
     panelStyle['--dock-panel-max-height'] = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
   }
 
-  const defaultHeadingTag = size === 'small' ? 'h4' : 'h3';
-  const titleHeadingTag = headingElement ?? defaultHeadingTag;
-  const titleTextStyle = isCollapsed ? 'small' : undefined;
+  const titleElement = headingElement ?? (size === 'small' ? 'h4' : 'h3');
   const toggleButtonLabel = isCollapsed ? labels.expand : labels.collapse;
   const toggleButtonIcon = isCollapsed ? 'zoom_out_map' : 'zoom_in_map';
-  const hasHeaderActions = headerActions !== null && headerActions !== undefined;
-  const hasFooter = footer !== null && footer !== undefined;
+  const hasHeaderActions = headerActions !== null && headerActions !== undefined && typeof headerActions !== 'boolean';
+  const hasFooter = footer !== null && footer !== undefined && typeof footer !== 'boolean';
 
-  return (
+  const panel = (
     <div
-      {...rest}
-      ref={ref}
       id={panelId}
       role="region"
-      aria-labelledby={rest['aria-labelledby'] ?? titleId}
-      data-dock-panel=""
+      aria-labelledby={titleId}
       data-placement={placement}
       data-size={size}
       data-collapsed={isCollapsed}
+      data-resizable={resizable}
       className={cn(styles['tedi-dock-panel'], className)}
       style={panelStyle}
     >
       <div className={styles['tedi-dock-panel__header']}>
-        <Heading
-          id={titleId}
-          element={titleHeadingTag}
-          modifiers={titleTextStyle}
-          className={styles['tedi-dock-panel__title']}
-        >
-          {title}
-        </Heading>
-
-        {hasHeaderActions && (
-          <div ref={headerActionsRef} className={styles['tedi-dock-panel__header-actions']} hidden={isCollapsed}>
-            {headerActions}
-          </div>
-        )}
-
-        <div className={styles['tedi-dock-panel__controls']}>
-          <Button
-            ref={toggleButtonRef}
-            className={styles['tedi-dock-panel__toggle']}
-            type="button"
-            visualType="neutral"
-            icon={toggleButtonIcon}
-            title={toggleButtonLabel}
-            aria-expanded={!isCollapsed}
-            aria-controls={bodyId}
-            onClick={handleToggle}
+        <div className={styles['tedi-dock-panel__header-row']}>
+          <Heading
+            id={titleId}
+            element={titleElement}
+            modifiers={isCollapsed ? 'small' : undefined}
+            className={styles['tedi-dock-panel__title']}
           >
-            {toggleButtonLabel}
-          </Button>
+            {title}
+          </Heading>
 
-          {onClose && (
+          {hasHeaderActions && (
+            <div className={styles['tedi-dock-panel__header-actions']} hidden={isCollapsed}>
+              {headerActions}
+            </div>
+          )}
+
+          <div className={styles['tedi-dock-panel__controls']}>
             <Button
-              className={styles['tedi-dock-panel__close']}
+              className={styles['tedi-dock-panel__toggle']}
               type="button"
               visualType="neutral"
-              icon="close"
-              title={labels.close}
-              onClick={onClose}
+              icon={toggleButtonIcon}
+              title={toggleButtonLabel}
+              aria-expanded={!isCollapsed}
+              aria-controls={bodyId}
+              onClick={handleCollapseToggle}
             >
-              {labels.close}
+              {toggleButtonLabel}
             </Button>
-          )}
+
+            {onClose && (
+              <Button
+                className={styles['tedi-dock-panel__close']}
+                type="button"
+                visualType="neutral"
+                icon="close"
+                title={labels.close}
+                onClick={onClose}
+              >
+                {labels.close}
+              </Button>
+            )}
+          </div>
         </div>
+        {description && (
+          <div className={styles['tedi-dock-panel__description']} hidden={isCollapsed}>
+            {description}
+          </div>
+        )}
       </div>
 
-      <div ref={bodyRef} id={bodyId} className={styles['tedi-dock-panel__body']} hidden={isCollapsed}>
-        <div className={styles['tedi-dock-panel__content']}>
-          <div className={styles['tedi-dock-panel__content-inner']}>{children}</div>
+      <div id={bodyId} className={styles['tedi-dock-panel__body']} hidden={isCollapsed}>
+        <div className={styles['tedi-dock-panel__scroll-area']}>
+          <div className={styles['tedi-dock-panel__content']}>{children}</div>
         </div>
         {hasFooter && <div className={styles['tedi-dock-panel__footer']}>{footer}</div>}
       </div>
     </div>
   );
-});
 
-DockPanel.displayName = 'DockPanel';
+  if (!resizable) return panel;
+
+  if (!initialResizeMeasurements) {
+    return (
+      <div
+        ref={resizeMeasurementRef}
+        aria-hidden="true"
+        data-placement={placement}
+        className={cn(styles['tedi-dock-panel'], styles['tedi-dock-panel__resize-measurement'], className)}
+        style={panelStyle}
+      />
+    );
+  }
+
+  const resizeLayoutStyle: DockPanelStyle = {
+    height: placement === 'left' || placement === 'right' ? panelStyle['--dock-panel-height'] : undefined,
+    maxHeight: panelStyle['--dock-panel-max-height'],
+    zIndex: style?.zIndex,
+    '--dock-panel-gap': panelStyle['--dock-panel-gap'],
+    '--dock-panel-rail-size': panelStyle['--dock-panel-rail-size'],
+    '--dock-panel-layer': panelStyle['--dock-panel-layer'],
+  };
+
+  return (
+    <div
+      className={styles['tedi-dock-panel__resize-layout']}
+      data-placement={placement}
+      data-collapsed={isCollapsed}
+      style={resizeLayoutStyle}
+    >
+      <Resizer
+        className={styles['tedi-dock-panel__resizer']}
+        handlePosition={resizeHandleByPlacement[placement]}
+        initialWidth={initialResizeMeasurements.width}
+        initialHeight={initialResizeMeasurements.height}
+        minWidth={0}
+        minHeight={0}
+        maxWidth={initialResizeMeasurements.maxWidth}
+        maxHeight={initialResizeMeasurements.maxHeight}
+        showIndicator={false}
+      >
+        {panel}
+      </Resizer>
+    </div>
+  );
+};
 
 /**
- * Shared layout for one DockPanel and its underlying application content.
- * Expanded panels are out of flow. A minimized panel occupies a separate grid track,
- * so the workspace resizes without being obscured by the rail.
- * Keep the layout mounted when opening/closing the panel to preserve application state.
+ * Expanded panels overlay the workspace; minimized panels reserve a grid track.
+ * Keep the layout mounted when opening/closing panels to preserve workspace state.
  */
-export interface DockPanelLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /** Required. Underlying application content, such as a map, editor or table. */
+export interface DockPanelLayoutProps {
+  /** Underlying application content. */
   children: ReactNode;
-  /** Optional. One DockPanel, or a layout-aware wrapper containing it. Null means closed. */
+  /** One DockPanel or a layout-aware wrapper containing it. Null means closed. */
   panel?: ReactNode;
+  /** Additional workspace layout class names. */
+  className?: string;
+  /** Workspace layout styles, including its height. */
+  style?: CSSProperties;
 }
 
-export const DockPanelLayout = forwardRef<HTMLDivElement, DockPanelLayoutProps>(
-  ({ children, panel, className, ...rest }, ref) => (
-    <div {...rest} ref={ref} className={cn(styles['tedi-dock-panel-layout'], className)}>
-      <div className={styles['tedi-dock-panel-layout__content']} data-dock-panel-layout-content="">
-        {children}
-      </div>
-      {panel}
-    </div>
-  )
+export const DockPanelLayout = ({ children, panel, className, style }: DockPanelLayoutProps): JSX.Element => (
+  <div className={cn(styles['tedi-dock-panel-layout'], className)} style={style}>
+    <div className={styles['tedi-dock-panel-layout__content']}>{children}</div>
+    {panel}
+  </div>
 );
 
-DockPanelLayout.displayName = 'DockPanelLayout';
-
 export default DockPanel;