Dock Manager Specification

Dock Manager Specification

Contents

1. Revision History
2. Overview
3. User Stories
   1. End User Experience
   2. Developer Experience
4. Functionality
   1. User Interface
   2. Globalization/Localization
   3. Navigation
   4. API
5. Acceptance criteria
6. Accessibility
7. Internationalization
8. Assumptions and Limitations
9. Test Scenarios
10. References

• Konstantin Dinev | Date:
• Radoslav Mirchev | Date:
• Svilen Dimchevski | Date:

1. Revision History

Version	User	Date	Notes
0.1	Stefan Ivanov	Oct 11, 2019	Initial draft
0.2	Diyan Dimitrov	Aug 25, 2020	API spec
0.3	Diyan Dimitrov	Oct 30, 2020	Update API spec
0.4	Dimitar Dimitrov	Nov 24, 2020	Localization
0.5	Diyan Dimitrov	Aug 11, 2021	CSS Parts
0.5	Ivaylo Barakov	Aug 30, 2023	Moved spec from igniteui
0.6	Ivaylo Barakov	Sep 12, 2023	Update API section
0.7	Galina Edinakova	Feb 05, 2026	Update API section

2. Overview

The Dock Manager provides a framework for complex layouts splitting the view into multiple smaller ones. This can be done recursively in order to create arbitrary layouts that can be manipulated and adjusted at runtime.

3. User Stories

End User Stories

As an end user:

• I want to dock a pane left, right, top, or bottom at any nesting level, including the root.
• I want joystick indicators that clearly show valid docking targets.
• I want to split a full-screen view left/right to compare documents side by side.
• I want to dock real-time logs at the bottom of the layout.
• I want to dock commands or ribbon-style content at the top of the layout.
• I expect multiple tabbed views per pane.
• I want to reorder tabs via drag/drop.
• I want overflow tabs to appear in a dropdown when space is limited.

• I expect to cycle tabs with Ctrl+F6/Shift+Ctrl+F6 (Cmd on Mac).
• I expect to cycle panes or windows with Alt+F6/Alt+Shift+F6.
• I want to stash panes in a tray via pin/unpin.
• I want to open, close, and resize the tray.
• I want to drag items from the tray to dock them back into the layout.
• I want to save my layout and restore it so it reopens the same way.
• When loading another layout, I expect existing panes to re-dock following the new structure.
• I want to move splitters to resize panes.
• When space is tight, I want the active tab kept visible while extra tabs move into a dropdown.
• I want to float any pane (even outside the host) and bring it on top.
• I want to double-click a header to maximize or restore a pane.
• I want to Ctrl/Cmd+double-click a header to float or dock a pane.
• I want a pane header menu that lists applicable actions.
• I want to dock a pane as a tab without splitting the host.
• I want a navigator dialog to jump quickly to panes.

Developer Stories

As a developer:

• I want to define a pane hierarchy with relative sizes.
• I want to dock, undock, and close panes programmatically.
• I want to persist layouts and restore them later.
• I want to exclude specific panes from persistence or restoration.
• I want a document host whose tabs sit at the top.
• I want document-host tabs that cannot be unpinned or minimized.
• I want the document host to support one document per tab.

• I want frozen tabs via pin/unpin with extra rows when needed.
• I want a clear visual distinction between the document area (tabs on top) and other panes (tabs on bottom).
• I want to pin or unpin panes programmatically.
• I want to choose whether close or unpin actions affect all descendant panes or only the selected pane.
• I want to control docking, pinning, floating, and maximizing permissions per pane.
• I want to mark panes as document-only.
• I want to set minimum sizes per pane.
• I want to freeze arrangements to block user resize or rearrange while still allowing tab browsing.
• I want to provide templates for tab headers with text, icons, or images.
• I want to provide templates for pane headers with text, icons, or images.
• I want to rely on built-in tray and docking indicators without extra work.
• I want to define allowable docking positions per pane.
• I want to localize all UI strings via resourceStrings or lang.

4. Functionality

User Interface

Design Hands-Off:

Handoff for Navigator

Globalization/Localization

• Reads lang from the document root (<html lang> only); falls back to English (en) if missing or unsupported.
• In v1.0.x, built-in resource strings: English (en), Japanese (jp), Korean (ko), Spanish (es).
• Since v2.0.x (Lit), localization is provided through igniteui-i18n-core; install the igniteui-i18n-resources peer package and register bundles (e.g., with registerI18n) before setting lang.
• Use resourceStrings to override labels at runtime; use addResourceStrings(language, resourceStrings) to register additional locales and then set lang on <html>.
• Localized strings are applied to context menus, tooltips, buttons, and ARIA labels.

API

IgcDockManagerComponent

Properties

Name	Description	Type
activePane	Determines the active content pane.	IgcContentPane | null
allowMaximize	Whether maximize action button is displayed for panes. Defaults to true.	boolean
allowInnerDock	Whether docking inside a pane is allowed. Defaults to true.	boolean
allowRootDock	Whether docking into the root-level pane is allowed. Defaults to true.	boolean
allowSplitterDock	Whether docking over a splitter is allowed. Defaults to false.	boolean
allowFloatingPanesResize	Whether floating panes can be resized. Defaults to true.	boolean
autoScrollConfig	Edge auto-scroll configuration used during drag/resize. Defaults to { edgeThreshold: 20, scrollSpeed: 15 }.	{ edgeThreshold: number; scrollSpeed: number }
closeBehavior	Which panes are affected by close operations. Defaults to allPanes.	PaneActionBehavior
containedInBoundaries	Whether pane dragging stops when any pane side leaves the Dock Manager bounds. Defaults to false.	boolean
contextMenuPosition	Position to open the context menu.	ContextMenuPosition
direction	Gets the direction of the Dock Manager.	string
disableKeyboardNavigation	Disables built-in keyboard navigation. Defaults to false.	boolean
draggedPane	Determines the pane that is currently dragged.	IgcContentPane | IgcSplitPane | IgcTabGroupPane | null
dropPosition	Drop position when docking programmatically.	IgcDockManagerPoint
enableDragCursor	Enables pointer cursor when hovering draggable headers. Defaults to false.	boolean
isValidDrop	Whether the last drop/drag target was valid.	boolean
layout	The layout configuration of the Dock Manager.	IgcDockManagerLayout
maximizedPane	Determines the pane that is currently maximized.	IgcContentPane | IgcSplitPane | IgcTabGroupPane
navigationPaneMeta	Metadata for the pane-navigator overlay.	IgcPaneNavigatorMetadata | null
proximityDock	Enables proximity docking (without showing indicators). Defaults to false.	boolean
resourceStrings	Gets/sets the resource strings.	IgcDockManagerResourceStrings
showHeaderIconOnHover	Which header icons are shown on hover. Defaults to none.	'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'
showPaneHeaders	Whether pane headers are shown always or only on hover. Defaults to always.	'always' | 'onHoverOnly'
unpinBehavior	Which panes are affected by unpin operations. Defaults to allPanes.	PaneActionBehavior
useFixedSizeOnDock	Apply FixedSize sizing mode on docking for specific orientations. Defaults to none.	'none' | 'vertical' | 'horizontal' | 'both'

Methods

Name	Description	Return type	Parameters
dropPane	Drops the current draggedPane at the specified dropPosition. Resolves to true if the pane was docked.	Promise<boolean>	-
removePane	Removes a pane from the layout.	Promise<void>	pane: IgcDockManagerPane
focusPane	Focuses a pane by its content id.	Promise<void>	contentId: string
focusElement	Focuses the dock manager host element.	void	-
getDockedPanesContainerRect	Returns the bounding client rect of the docked panes container.	DOMRect | undefined	-
scrollPaneIntoView	Scrolls the docked panes container to bring a pane into view.	void	pane: IgcDockManagerPane

Events

Name	Description	Cancelable	Type
activePaneChanged	Raised when a pane is selected/activated.	true	CustomEvent<IgcActivePaneEventArgs>
floatingPaneResizeStart	Raised when a floating pane resize starts.	true	CustomEvent<IgcFloatingPaneResizeEventArgs>
floatingPaneResizeMove	Raised while a floating pane is being resized.	true	CustomEvent<IgcFloatingPaneResizeMoveEventArgs>
floatingPaneResizeEnd	Raised when a floating pane resize ends.	false	CustomEvent<IgcFloatingPaneResizeEventArgs>
layoutChange	Raised when the layout updates programmatically.	false	CustomEvent
paneDragStart	Raised when a pane drag starts.	true	CustomEvent<IgcPaneDragStartEventArgs>
paneDragOver	Raised while a pane is dragged.	true	CustomEvent<IgcPaneDragOverEventArgs>
paneDragEnd	Raised when a pane drag ends.	false	CustomEvent<IgcPaneDragEndEventArgs>
paneFlyoutToggle	Raised when an unpinned pane flyout opens or closes.	true	CustomEvent<IgcPaneFlyoutEventArgs>
paneHeaderConnected	Raised when a pane header element is connected.	false	CustomEvent<IgcPaneHeaderConnectionEventArgs>
paneHeaderDisconnected	Raised when a pane header element is disconnected.	false	CustomEvent<IgcPaneHeaderConnectionEventArgs>
tabHeaderConnected	Raised when a tab header element is connected.	false	CustomEvent<IgcTabHeaderConnectionEventArgs>
tabHeaderDisconnected	Raised when a tab header element is disconnected.	false	CustomEvent<IgcTabHeaderConnectionEventArgs>
paneClose	Raised when panes are about to close.	true	CustomEvent<IgcPaneCloseEventArgs>
paneScroll	Raised when a pane is scrolled.	true	CustomEvent<IgcPaneScrollEventArgs>
panePinnedToggle	Raised when panes are pinned or unpinned.	true	CustomEvent<IgcPanePinnedEventArgs>
splitterResizeStart	Raised when a splitter resizing starts.	true	CustomEvent<IgcSplitterResizeEventArgs>
splitterResizeEnd	Raised when a splitter resizing ends.	false	CustomEvent<IgcSplitterResizeEventArgs>

CSS Parts

Name	Description
content-pane	The content pane component.
split-pane	The split pane component
floating-window	Indicates a floating pane
pane-header	The content pane header component
pane-header-content	The content area of the content pane header
pane-header-actions	The actions area of the content pane header
pane-header-close-button	The close button of a pane header
pane-header-maximize-button	The maximize button of a pane header
pane-header-minimize-button	The minimize button of a pane header
pane-header-pin-button	The pin button of a pane header
pane-header-unpin-button	The unpin button of a pane header
splitter	The resizing splitter component
splitter-base	The base element of the splitter component
splitter-ghost	The ghost element of the splitter component
splitter-handle	Indicates the custom splitter handle.
tab-panel	The tab panel component
tab-strip-area	The tab strip area containing the tab headers.
tab-strip-actions	The tab strip area containing the tab actions.
tabs-container	The container area of the tabs
tabs-content	The content area of the tabs
tabs-minimize-button	The minimize button of the tabs
tabs-maximize-button	The minimize button of the tabs
tabs-more-button	The more button of the tabs
context-menu	The context menu component
context-menu-item	An item in the context menu component
context-menu-content	The content section of the context menu component
context-menu-close-button	The close button in the context menu component
context-menu-unpin-button	The unpin button in the context menu component
docking-preview	The docking preview area
docking-indicator	The non-root docking indicator
root-docking-indicator	The root docking indicator
pane-navigator	The pane navigator component
pane-navigator-header	The header area of the pane navigator
pane-navigator-body	The body area of the pane navigator
pane-navigator-items-group	An items group in the pane navigator component
pane-navigator-items-group-title	The title element of an items group in the pane navigator
pane-navigator-item	An item in the pane navigator
tab-header	The tab header component
header-title	The header title area of a tab header.
tab-header-close-button	The close button of a tab header
tab-header-more-options-button	The more options button of a tab header
unpinned-pane-header	The unpinned pane header component
unpinned-tab-area	Indicates the unpinned tab area.
unpinned-tab-area--left	Indicates the unpinned tab area on the left.
unpinned-tab-area--right	Indicates the unpinned tab area on the right.
unpinned-tab-area--bottom	Indicates the unpinned tab area on the bottom.
unpinned-tab-area--horizontal	Indicates a horizontal unpinned tab area with top or bottom location.
unpinned-tab-area--hidden	Indicates an unpinned tab area without any panes.
single-floating	Applies to a single floating content-pane.
active	Indicates an active state. Applies to pane-header, pane-header-content, pane-header-actions, tab-header, unpinned-pane-header, tab-header-close-button, tab-header-more-options-button .
disabled	Indicates a disabled state. Applies to context-menu, pane-navigator, content-pane, pane-header, pane-header-content, pane-header-actions, unpinned-pane-header, tab-header, tab-panel, pane-navigator-item.
floating	Indicates a floating pane placement. Applies to pane-header, pane-header-content, pane-header-actions, tab-header-more-options.
window	Indicates a floating window placement. Applies to pane-header, pane-header-content, pane-header-actions.
selected	Indicates a selected state. Applies to tab-header, tab-header-close-button, pane-navigator-item, tab-panel
document	Indicates a document host. Applies to tabs-content.
start	Indicates a position at start. Applies to unpinned-pane-header.
end	Indicates a position at end. Applies to unpinned-pane-header.
top	Indicates a top tabs position. Applies to tab-header, tab-strip-area, tab-strip-actions.
bottom	Indicates a bottom tabs position. Applies to tab-header, tab-strip-area, tab-strip-actions.
horizontal	Indicates a horizontal position. Applies to unpinned-pane-header, splitter-handle.
vertical	Indicates a vertical position. Applies to unpinned-pane-header, splitter-handle.
hovered	Indicates a hovered state. Applies to tab-header-close-button
hover-preview-close	Indicates the close button shown on hover. Applies to tab-header.
hover-preview-options	Indicates the more options button shown on hover. Applies to tab-header.

Slots

Name	Description
pinButton	The pin button slot.
unpinButton	The unpin button slot.
maximizeButton	The maximize button slot.
minimizeButton	The minimize button slot.
moreOptionsButton	The more options button slot.
closeButton	The close button in pane and tab headers
moreTabsButton	The more tabs button slot in tabs component.
tabHeaderCloseButton	The close button slot of a tab header.
paneHeaderCloseButton	The close button slot of a pane header.
splitterHandle	The splitter handle slot.

CSS Custom Properties

Name	Description	Default
--igc-background-color	Base background color.	#e5e7e9 (light) / #111 (dark)
--igc-accent-color	Accent color for highlights and buttons.	#fff (light) / #424242 (dark)
--igc-text-color	Primary text color.	rgb(0 0 0 / 72%) (light) / rgb(255 255 255 / 70%) (dark)
--igc-border-color	Border color for panes and tabs.	#f3f5f7 (light) / #212121 (dark)
--igc-resize-target-border-color / --igc-resize-target-border-width / --igc-resize-target-border-style	Border highlight shown on the pane being resized.	magenta / 0 / solid
--igc-resize-handle-width / --igc-resize-handle-height	Size of resize handles (legacy names used as fallbacks for thickness/size).	2px / 80px
--igc-resize-handle-size / --igc-resize-handle-thickness	Orientation-agnostic resize handle size/thickness.	80px / 2px
--igc-splitter-background	Splitter fill color.	#d3d6d9 (light) / #000 (dark)
--igc-splitter-thickness	Splitter thickness.	4px
--igc-joystick-background / --igc-joystick-border-color / --igc-joystick-icon-color / --igc-joystick-icon-color-active	Colors for docking indicators.	Accent / Accent / Text / #000 (light) / #fff (dark)
--igc-pane-content-background / --igc-pane-content-text	Pane content area background/text.	#f3f5f7 / rgb(0 0 0 / 72%) (light); #212121 / rgb(255 255 255 / 70%) (dark)
--igc-tab-background / --igc-tab-text / --igc-tab-background-active / --igc-tab-border-color	Tab background/text colors and borders.	Based on background/border defaults
--igc-floating-pane-border-color	Border color for floating panes.	#fff (light) / rgb(0 0 0 / 26%) (dark)
--igc-context-menu-background / --igc-context-menu-background-active / --igc-context-menu-color / --igc-context-menu-color-active	Context menu palette.	Accent / Border / Text / #000 (light) / #fff (dark)
--igc-flyout-shadow-color	Shadow color for flyouts.	rgb(0 0 0 / 8%) (light) / rgb(0 0 0 / 38%) (dark)
--igc-drop-shadow-background	Color for docking drop shadow preview.	rgb(cornflowerblue, 20%)
--igc-disabled-color	Disabled state color.	rgb(0 0 0 / 38%) (light) / rgb(255 255 255 / 50%) (dark)
--igc-button-component-text	Text color for embedded buttons.	inherit
--igc-sb-size	Scrollbar size.	12px
--igc-sb-track-bg-color / --igc-sb-track-bg-color-hover	Scrollbar track colors.	#e5e7e9 (light) / #111 (dark)
--igc-sb-track-border-color / --igc-sb-track-border-size	Scrollbar track border styling.	transparent / 0
--igc-sb-corner-bg / --igc-sb-corner-border-color / --igc-sb-corner-border-size	Scrollbar corner styling.	#e5e7e9 (light) / #111 (dark), transparent, 0
--igc-sb-thumb-border-size / --igc-sb-thumb-min-height	Scrollbar thumb border size and min height.	0 / 32px
--igc-sb-thumb-border-color / --igc-sb-thumb-border-radius	Scrollbar thumb border color/radius.	transparent / 0
--igc-sb-thumb-bg-color / --igc-sb-thumb-bg-color-hover	Scrollbar thumb colors.	#d1d1d1 → #afafaf (light); #3c3c3c → #616161 (dark)

IgcDockManagerLayout

Name	Description	Required	Type
rootPane	The root split pane of the layout.	true	IgcSplitPane
floatingPanes	The floating panes of the layout.	false	IgcSplitPane[]

IgcContentPane

Name	Description	Required	Type
id	The id of the pane. If not set the Dock Manager generates it automatically.	false	string
type	The type of the pane.	true	IgcDockManagerPaneType.contentPane
contentId	Slot name of the content element.	true	string
header	Text header for the pane (also used for ARIA even when templates are provided).	true	string
headerId	Slot name of the pane header element. Overrides header text.	false	string
tabHeaderId	Slot name of the tab header element. Falls back to header if not set.	false	string
unpinnedHeaderId	Slot name of the unpinned header element. Falls back to header if not set.	false	string
floatingHeaderId	Slot name of the floating header element. Falls back to headerId.	false	string
size	Relative size of the pane. Defaults to 100.	false	number
allowClose	Whether the pane can be closed. Defaults to true.	false	boolean
allowMaximize	Whether the pane can be maximized. Defaults to true.	false	boolean
allowPinning	Whether the pane can be pinned/unpinned. Defaults to true.	false	boolean
allowDocking	Whether the pane can be docked. Defaults to true.	false	boolean
allowFloating	Whether the pane can be floated. Defaults to true.	false	boolean
acceptsInnerDock	Whether other panes can be docked inside this pane. Defaults to true.	false	boolean
unpinnedSize	Absolute size when unpinned. Defaults to 200.	false	number
isPinned	Whether the pane is pinned. Defaults to true.	false	boolean
isMaximized	Whether the pane is maximized. Defaults to false.	false	boolean
unpinnedLocation	Preferred unpinned location. Defaults to auto-calculated (left if unknown).	false	IgcUnpinnedLocation
hidden	Whether the pane is hidden. Defaults to false.	false	boolean
disabled	Whether the pane is disabled. Defaults to false.	false	boolean
documentOnly	Restricts docking to document hosts only. Defaults to false.	false	boolean

IgcSplitPane

Name	Description	Required	Type
id	The id of the pane. If not set the Dock Manager generates it automatically.	false	string
type	The type of the pane.	true	IgcDockManagerPaneType.splitPane
orientation	The slot attribute's value of the content element.	true	IgcSplitPaneOrientation
panes	The child panes of the split pane.	true	IgcDockManagerPane[]
size	The relative size of the pane. Defaults to 100.	false	number
floatingLocation	The absolute location point of the pane. Applies only for floating panes.	false	IgcDockManagerPoint
floatingWidth	The absolute width of the pane. Applies only for floating panes. Defaults to 100.	false	number
floatingHeight	The absolute height of the pane. Applies only for floating panes. Defaults to 100.	false	number
floatingResizable	Determines whether floating pane resizing is allowed. Applies only for floating panes.	false	boolean
allowEmpty	Determines whether the pane should present in the UI when empty.	false	boolean
useFixedSize	Sizes child panes in pixels and allows scrollable overflow when resizing beyond the viewport. Defaults to false.	false	boolean
isMaximized	Determines whether a split pane is maximized or not. Defaults to false. (Deprecated in favor of pane-level maximize.)	false	boolean

IgcTabGroupPane

Name	Description	Required	Type
id	The id of the pane. If not set the Dock Manager generates it automatically.	false	string
type	The type of the pane.	true	IgcDockManagerPaneType.tabGroupPane
panes	The child content panes of the tab group.	true	IgcDockManagerPane[]
size	The relative size of the pane. Defaults to 100.	false	number
selectedIndex	The index of the selected tab.	false	number
allowEmpty	Determines whether the pane should present in the UI when empty.	false	boolean
isMaximized	Determines whether a split pane is maximized or not. Defaults to false.	false	boolean

IgcDocumentHost

Name	Description	Required	Type
id	The id of the pane. If not set the Dock Manager generates it automatically.	false	string
type	The type of the pane.	true	IgcDockManagerPaneType.documentHost
rootPane	The root split pane of the document host.	true	IgcSplitPane
size	The relative size of the pane. Defaults to 100.	false	number

IgcDockingIndicator

Name	Description	Required	Type
position	Gets the position of the docking indicator.	false	IgcDockingIndicatorPosition
isRoot	Gets a value indicating whether the docking indicator is a root one.	true	boolean
direction	Gets a value indicating the direction of the docking indicator.	true	string

IgcPaneHeaderElement/IgcTabHeaderElement

Name	Description	Type
dragService	Gets/sets the drag service.	IgcDragService

IgcDockManagerResourceStrings

Name	Required	Type
close	false	string
pin	false	string
unpin	false	string
maximize	false	string
minimize	false	string
panes	false	string
documents	false	string
moreTabs	false	string
moreOptions	false	string

Other

Name	Description	Return type	Parameters
addResourceStrings	Adds custom resource strings.		language: string, resourceStrings: IgcDockManagerResourceStrings

5. Acceptance criteria

• Must render the provided layout (root + floating panes) without errors and preserve pane order, sizes, and selected tabs.
• Drag/dock/float/pin/unpin operations must update the layout state and emit corresponding events (paneDrag*, panePinnedToggle, paneFlyoutToggle).
• Splitter resize must respect min sizes and emit splitterResize* events; floating panes must be resizable when allowed.
• Keyboard navigation (section 6.1) must move focus/panes as described when not disabled.
• Localization via resourceStrings must reflect in context menus/tooltips/ARIA labels; lang detection falls back to en when unsupported.

6. Accessibility

6.1 Keyboard Navigation

Key	Result
Shift + Arrow up	With multiple tabs in a tab group splits the view and docks the focused tab above
Cmd/Ctrl + Shift + Arrow up	Dock to global top
Shift + Arrow down	With multiple tabs in a tab group splits the view and docks the focused tab below
Cmd/Ctrl + Shift + Arrow down	Dock to global bottom
Shift + Arrow right	With multiple tabs in a tab group splits the view and docks the focused tab right
Cmd/Ctrl + Shift + Arrow right	Dock to global right
Shift + Arrow left	With multiple tabs in a tab group splits the view and docks the focused tab left
Cmd/Ctrl + Shift + Arrow left	Dock to global left
Alt + F3.	Closes document/tab
Cmd/Ctrl + F6	Focus next tab in document host
Cmd/Ctrl + Arrow right	Focus next tab in document host
Cmd/Ctrl + Shift + F6	Focus previous tab in document host
Cmd/Ctrl + Arrow left	Focus previous tab in document host
Alt + F6	Focus next content pane
Alt + Shift + F6	Focus previous content pane
Cmd/Ctrl + F7	Show the navigator and iterate panes and documents starting from the first document forward
Cmd/Ctrl + F8	Show the navigator and iterate panes and documents starting from the first document forward
Alt + F7	Show the navigator and iterate panes and documents starting from the first pane forward
Alt + F8	Show the navigator and iterate panes and documents starting from the first pane forward
Cmd/Ctrl + Shift + F7	Show the navigator and iterate panes and documents starting from the last document backwards
Cmd/Ctrl + Shift + F8	Show the navigator and iterate panes and documents starting from the last document backwards
Alt + Shift + F7	Show the navigator and iterate panes and documents starting from the last pane backwards
Alt + Shift + F8	Show the navigator and iterate panes and documents starting from the last pane backwards

6.2 ARIA Support

• Host sets role="group" and is focusable (tabIndex=0) to participate in page navigation.
• Pane headers/tabs use text headers (or slotted headers) for accessible names; header text is still used for ARIA when templates are provided.
• Action buttons (close/pin/maximize/more) expose labels from resourceStrings for screen readers.
• Keyboard shortcuts can be disabled via disableKeyboardNavigation when embedding in custom accessibility flows.

7. Internationalization

See Globalization/Localization for localization behavior and APIs.

7.1 RTL Support

• Honors document direction (dir="rtl"), reversing horizontal docking indicators, scroll directions, and splitter drag behavior where applicable.

8. Assumptions and Limitations

• contentId values must be unique within a layout and map to slotted content in the light DOM.
• Document-only panes (documentOnly) require a document host; if none exists, docking is limited accordingly.
• Persistence of layouts (save/load) is app-owned; the component exposes layout state but does not store it.
• Extremely nested layouts or oversized content can require host scroll containers—set useFixedSize or size constraints as needed.

9. Test Scenarios

Automation

• Initial render: loads provided layout (root + floating panes), verifies active pane, tab selection, and header visibility rules.
• Drag & dock: dock content panes to all indicator positions (root and inner), verify events and resulting layout structure.
• Pin/unpin/flyout: toggle pin state, open flyout, verify panePinnedToggle and paneFlyoutToggle events and focus behavior.
• Splitter resize: resize with min constraints; verify splitterResize* events and size updates; fixed-size panes allow scroll overflow.
• Floating resize/move: resize via handles, move inside boundaries when containedInBoundaries is true; verify floatingPaneResize* events.
• Keyboard navigation: cover shortcuts in 6.1; ensure disableKeyboardNavigation stops built-ins.
• API ↔ UI sync: set layout, activePane, maximizedPane programmatically and via UI; verify events fire and state matches.
• Localization: set resourceStrings and lang; verify labels/tooltips reflect strings; fallback to en when missing.
• CSS vars: set --igc-pane-header-height / --igc-pane-header-min-height; verify rendered height and hover activation respect values.

Manual

• Visual inspection of docking indicators, hover-revealed headers when showPaneHeaders='onHoverOnly', and custom slotted buttons.
• RTL layout pass (dir="rtl"): docking indicators, scroll/resizing direction, and tab order feel natural.