From fcf1fd9becd1348af16c50195c668cc897c01c7d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 23 Dec 2021 11:39:25 -0500
Subject: [PATCH] update docs

---
 docs/components/split-panel.md            |  4 +++-
 src/components/split-panel/split-panel.ts | 10 +++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/components/split-panel.md b/docs/components/split-panel.md
index ffa499d3..e9e08931 100644
--- a/docs/components/split-panel.md
+++ b/docs/components/split-panel.md
@@ -142,7 +142,9 @@ Try resizing the example below with each option and notice how the panels respon
 
 ### Min & Max
 
-To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size restrictions can only be applied to the primary panel. This examples shows how you can make both panels be a minimum of 150px using `--min`, `--max`, and the `calc()` function.
+To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size constraints can only be applied to the primary panel (or the `start` panel if a primary panel isn't designated).
+
+This examples demonstrates how you can make both panels be a minimum of 150px using `--min`, `--max`, and the `calc()` function.
 
 ```html preview
 <sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 92c41276..50aa793d 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -13,14 +13,14 @@ import styles from './split-panel.styles';
  *
  * @event sl-reposition - Emitted when the divider's position changes.
  *
- * @csspart divider - The divider that separates both panels.
+ * @csspart divider - The divider that separates the primary and secondary panels.
  *
  * @slot start - The start panel.
  * @slot end - The end panel.
  * @slot handle - An optional handle to render at the center of the divider.
  *
  * @cssproperty [--divider-width=4px] - The width of the visible divider.
- * @cssproperty [--divider-hit-area=12px] - The invisible area around the divider where dragging can occur.
+ * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur.
  * @cssproperty [--min=0] - The minimum allowed size of the primary panel.
  * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
  */
@@ -48,7 +48,7 @@ export default class SlSplitPanel extends LitElement {
 
   /**
    * When the host element is resized, the primary panel will maintain its size and the other panel will grow or shrink
-   * to fit the remaining space. If no primary panel is set, both panels will resize proportionally when the host
+   * to fit the remaining space. If no primary panel is designated, both panels will resize proportionally when the host
    * element is resized.
    */
   @property() primary: 'start' | 'end';
@@ -197,7 +197,7 @@ export default class SlSplitPanel extends LitElement {
     }
   }
 
-  /** Gets the divider's position as a percentage of the container's size. */
+  /** Gets the divider's position as a percentage of the container's size (0-100). */
   getPositionAsPercentage() {
     if (this.size === 0) {
       return 0;
@@ -206,7 +206,7 @@ export default class SlSplitPanel extends LitElement {
     return (this.position / this.size) * 100;
   }
 
-  /** Sets the divider position as a percentage of the container's size. */
+  /** Sets the divider position as a percentage of the container's size (0-100). */
   setPositionAsPercentage(value: number) {
     this.position = clamp(this.size * (value / 100), 0, this.size);
   }