From 073b80d151cc1378439b94d2b2efb48736c87713 Mon Sep 17 00:00:00 2001
From: jsakamotoIGJP <jsakamoto@infragistics.com>
Date: Tue, 28 Jul 2026 11:44:23 +0900
Subject: [PATCH 1/2] docs(splitter): Persist pane size in the persisted layout
 story

---
 stories/splitter.stories.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/stories/splitter.stories.ts b/stories/splitter.stories.ts
index 88fcaa655..07b856200 100644
--- a/stories/splitter.stories.ts
+++ b/stories/splitter.stories.ts
@@ -368,20 +368,25 @@ export const PersistedLayout: Story = {
     docs: {
       description: {
         story:
-          'Demonstrates reading/writing the `startCollapsed`/`endCollapsed` properties and listening for ' +
-          '`igcExpansionChanged` to persist the collapsed state (e.g. in `localStorage`) and restore it on load.',
+          'Demonstrates reading/writing the `startSize` and `startCollapsed`/`endCollapsed` properties and listening for ' +
+          '`igcResizeEnd`/`igcExpansionChanged` to persist the pane size and collapsed state (e.g. in `localStorage`) ' +
+          'and restore them on load.',
       },
     },
   },
   render: () => {
     const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
-    const startCollapsed = saved ? JSON.parse(saved).startCollapsed : false;
-    const endCollapsed = saved ? JSON.parse(saved).endCollapsed : false;
+    const layout = saved ? JSON.parse(saved) : null;
+
+    const startSize = layout?.startSize ?? '50%';
+    const startCollapsed = layout?.startCollapsed ?? false;
+    const endCollapsed = layout?.endCollapsed ?? false;
 
     function persist(splitter: IgcSplitterComponent) {
       localStorage.setItem(
         PERSISTED_LAYOUT_KEY,
         JSON.stringify({
+          startSize: splitter.startSize,
           startCollapsed: splitter.startCollapsed,
           endCollapsed: splitter.endCollapsed,
         })
@@ -398,10 +403,13 @@ export const PersistedLayout: Story = {
 
       <igc-splitter
         style="height: 400px;"
+        .startSize=${startSize}
         .startCollapsed=${startCollapsed}
         .endCollapsed=${endCollapsed}
+        @igcResizeEnd=${(e: CustomEvent) =>
+        persist(e.target as IgcSplitterComponent)}
         @igcExpansionChanged=${(e: CustomEvent) =>
-          persist(e.target as IgcSplitterComponent)}
+        persist(e.target as IgcSplitterComponent)}
       >
         <div slot="start" class="demo-pane">
           <strong>Start panel</strong>

From 91433a45cf5ed38e5720a19c18380ca398995a7d Mon Sep 17 00:00:00 2001
From: jsakamotoIGJP <jsakamoto@infragistics.com>
Date: Tue, 28 Jul 2026 11:58:27 +0900
Subject: [PATCH 2/2] chore: Apply code formatting to the splitter story

---
 stories/splitter.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stories/splitter.stories.ts b/stories/splitter.stories.ts
index 07b856200..9ab5537f2 100644
--- a/stories/splitter.stories.ts
+++ b/stories/splitter.stories.ts
@@ -407,9 +407,9 @@ export const PersistedLayout: Story = {
         .startCollapsed=${startCollapsed}
         .endCollapsed=${endCollapsed}
         @igcResizeEnd=${(e: CustomEvent) =>
-        persist(e.target as IgcSplitterComponent)}
+          persist(e.target as IgcSplitterComponent)}
         @igcExpansionChanged=${(e: CustomEvent) =>
-        persist(e.target as IgcSplitterComponent)}
+          persist(e.target as IgcSplitterComponent)}
       >
         <div slot="start" class="demo-pane">
           <strong>Start panel</strong>