primary

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>
 ```
 

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 {