From d3ad2ec4f8e02b55b04533614baa018988e272a3 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 23 Dec 2021 08:24:44 -0500
Subject: [PATCH] primary

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

diff --git a/docs/components/split-panel.md b/docs/components/split-panel.md
index c8962be6..59688862 100644
--- a/docs/components/split-panel.md
+++ b/docs/components/split-panel.md
@@ -107,13 +107,13 @@ Add the `disabled` attribute to prevent the split panel from being resized.
 </sl-split-panel>
 ```
 
-### Setting the Fixed Panel
+### Setting the Primary Panel
 
-When the host element is resized, the fixed panel will maintain its size and the other panel will grow or shrink to fit the remaining space. Try resizing the example below with each option and notice how panels respond.
+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. Try resizing the example below with each option and notice how panels respond.
 
 ```html preview
-<div class="split-panel-fixed">
-  <sl-split-panel fixed="start">
+<div class="split-panel-primary">
+  <sl-split-panel primary="start">
     <div slot="start">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
     </div>
@@ -129,11 +129,11 @@ When the host element is resized, the fixed panel will maintain its size and the
 </div>
 
 <script>
-  const container = document.querySelector('.split-panel-fixed');
+  const container = document.querySelector('.split-panel-primary');
   const splitPanel = container.querySelector('sl-split-panel');
   const select = container.querySelector('sl-select');
 
-  select.addEventListener('sl-change', () => splitPanel.fixed = select.value);
+  select.addEventListener('sl-change', () => splitPanel.primary = select.value);
 </script>
 ```
 
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index f53bd9bf..466c0ed5 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/src/components/split-panel/split-panel.ts
@@ -35,7 +35,7 @@ export default class SlSplitPanel extends LitElement {
   @query('.divider') divider: HTMLElement;
 
   /**
-   * The current position of the divider from the fixed panel's edge. Defaults to 50% of the container's intial size.
+   * The current position of the divider from the primary panel's edge. Defaults to 50% of the container's intial size.
    */
   @property({ type: Number, reflect: true }) position: number;
 
@@ -46,10 +46,10 @@ export default class SlSplitPanel extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   /**
-   * When the host element is resized, the fixed panel will maintain its size and the other panel will grow or shrink to
+   * 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.
    */
-  @property() fixed: 'start' | 'end' = 'start';
+  @property() primary: 'start' | 'end' = 'start';
 
   /**
    * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
@@ -117,7 +117,7 @@ export default class SlSplitPanel extends LitElement {
       let newPosition = this.vertical ? y : x;
 
       // Flip for end panels
-      if (this.fixed === 'end') {
+      if (this.primary === 'end') {
         newPosition = this.size - newPosition;
       }
 
@@ -210,7 +210,7 @@ export default class SlSplitPanel extends LitElement {
     // TODO - min / max
     // TODO - custom divider styles + handle
 
-    if (this.fixed === 'end') {
+    if (this.primary === 'end') {
       start = `1 1 auto`;
       end = `0 0 calc((${this.position}px - var(--divider-width) / 2)`;
     } else {