almost

src/components/split-panel/split-panel.ts

@@ -11,8 +11,7 @@ import styles from './split-panel.styles';
  * @since 2.0
  * @status experimental
  *
- * @event sl-reposition - Emitted when the divider is repositioned.
- * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the container is resized.
+ * @event sl-reposition - Emitted when the divider's position changes.
  *
  * @csspart divider - The divider that separates both panels.
  *
@@ -30,6 +29,7 @@ export default class SlSplitPanel extends LitElement {
   static styles = styles;
 
   private localize = new LocalizeController(this);
+  private positionPercentage: number;
   private resizeObserver: ResizeObserver;
   private size: number;
 
@@ -47,10 +47,11 @@ export default class SlSplitPanel extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   /**
-   * 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.
+   * 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
+   * element is resized.
    */
-  @property() primary: 'start' | 'end' = 'start';
+  @property() primary: 'start' | 'end';
 
   /**
    * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.
@@ -79,6 +80,8 @@ export default class SlSplitPanel extends LitElement {
     if (!this.position) {
       this.position = this.size / 2;
     }
+
+    this.positionPercentage = this.getPositionAsPercentage();
   }
 
   handleDrag(event: Event) {
@@ -142,6 +145,7 @@ export default class SlSplitPanel extends LitElement {
       }
 
       this.position = clamp(newPosition, 0, this.size);
+      this.positionPercentage = this.getPositionAsPercentage();
     });
   }
 
@@ -151,7 +155,7 @@ export default class SlSplitPanel extends LitElement {
     }
 
     if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
-      let newPercentage = this.getPositionPercentage();
+      let newPercentage = this.getPositionAsPercentage();
       let incr = (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);
 
       event.preventDefault();
@@ -174,7 +178,7 @@ export default class SlSplitPanel extends LitElement {
 
       newPercentage = clamp(newPercentage, 0, 100);
 
-      this.setPositionPercentage(newPercentage);
+      this.setPositionAsPercentage(newPercentage);
     }
   }
 
@@ -187,11 +191,14 @@ export default class SlSplitPanel extends LitElement {
     const { width, height } = entries[0].contentRect;
     this.size = this.vertical ? height : width;
 
-    emit(this, 'sl-resize', { detail: { entries } });
+    // Resize proportionally when a primary panel isn't set
+    if (!this.primary && this.positionPercentage) {
+      this.setPositionAsPercentage(this.positionPercentage);
+    }
   }
 
   /** Gets the divider's position as a percentage of the container's size. */
-  getPositionPercentage() {
+  getPositionAsPercentage() {
     if (this.size === 0) {
       return 0;
     }
@@ -200,7 +207,7 @@ export default class SlSplitPanel extends LitElement {
   }
 
   /** Sets the divider position as a percentage of the container's size. */
-  setPositionPercentage(value: number) {
+  setPositionAsPercentage(value: number) {
     this.position = clamp(this.size * (value / 100), 0, this.size);
   }
 
@@ -235,7 +242,7 @@ export default class SlSplitPanel extends LitElement {
         class="divider"
         tabindex=${ifDefined(this.disabled ? undefined : '0')}
         role="separator"
-        aria-label=${this.localize.term('drag_to_resize')}
+        aria-label=${this.localize.term('resize')}
         @keydown=${this.handleKeyDown}
         @mousedown=${this.handleDrag}
         @touchstart=${this.handleDrag}

src/translations/de-ch.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Schliessen',
   copy: 'Kopieren',
   progress: 'Fortschritt',
+  resize: 'Größe ändern',
   scroll_to_end: 'Zum Ende scrollen',
   scroll_to_start: 'Zum Anfang scrollen',
   select_a_color_from_the_screen: 'Wähle eine Farbe vom Bildschirm',

src/translations/de.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Schließen',
   copy: 'Kopieren',
   progress: 'Fortschritt',
+  resize: 'Größe ändern',
   scroll_to_end: 'Zum Ende scrollen',
   scroll_to_start: 'Zum Anfang scrollen',
   select_a_color_from_the_screen: 'Wähle eine Farbe vom Bildschirm',

src/translations/en.ts

@@ -8,8 +8,8 @@ const translation: Translation = {
 
   close: 'Close',
   copy: 'Copy',
-  drag_to_resize: 'Drag to resize',
   progress: 'Progress',
+  resize: 'Resize',
   scroll_to_end: 'Scroll to end',
   scroll_to_start: 'Scroll to start',
   select_a_color_from_the_screen: 'Select a color from the screen',

src/translations/es.ts

@@ -8,8 +8,8 @@ const translation: Translation = {
 
   close: 'Cerrar',
   copy: 'Copiar',
-  drag_to_resize: 'Arrastra para cambiar el tamaño',
   progress: 'Progreso',
+  resize: 'Cambiar el tamaño',
   scroll_to_end: 'Desplazarse hasta el final',
   scroll_to_start: 'Desplazarse al inicio',
   select_a_color_from_the_screen: 'Seleccione un color de la pantalla',

src/translations/fr.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Fermer',
   copy: 'Copier',
   progress: 'Progrès',
+  resize: 'Redimensionner',
   scroll_to_end: `Faire défiler jusqu'à la fin`,
   scroll_to_start: `Faire défiler jusqu'au début`,
   select_a_color_from_the_screen: `Sélectionnez une couleur à l'écran`,

src/translations/he.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'סגור',
   copy: 'העתק',
   progress: 'התקדמות',
+  resize: 'שנה גודל',
   scroll_to_end: 'גלול עד הסוף',
   scroll_to_start: 'גלול להתחלה',
   select_a_color_from_the_screen: 'בחור צבע מהמסך',

src/translations/ja.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: '閉じる',
   copy: 'コピー',
   progress: '進行',
+  resize: 'サイズ変更',
   scroll_to_end: '最後にスクロールする',
   scroll_to_start: '最初にスクロールする',
   select_a_color_from_the_screen: '画面から色を選択してください',

src/translations/nl.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Sluiten',
   copy: 'Kopiëren',
   progress: 'Voortgang',
+  resize: 'Formaat wijzigen',
   scroll_to_end: 'Scroll naar einde',
   scroll_to_start: 'Scroll naar begin',
   select_a_color_from_the_screen: 'Selecteer een kleur van het scherm',

src/translations/pl.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Zamknij',
   copy: 'Kopiuj',
   progress: 'Postęp',
+  resize: 'Zmień rozmiar',
   scroll_to_end: 'Przewiń do końca',
   scroll_to_start: 'Przewiń do początku',
   select_a_color_from_the_screen: 'Próbkuj z ekranu',

src/translations/pt.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Fechar',
   copy: 'Copiar',
   progress: 'Progresso',
+  resize: 'Mudar o tamanho',
   scroll_to_end: 'Rolar até o final',
   scroll_to_start: 'Rolar até o começo',
   select_a_color_from_the_screen: 'Selecionar uma cor da tela',

src/translations/ru.ts

@@ -9,6 +9,7 @@ const translation: Translation = {
   close: 'Закрыть',
   copy: 'Скопировать',
   progress: 'Прогресс',
+  resize: 'Изменить размер',
   scroll_to_end: 'Пролистать до конца',
   scroll_to_start: 'Пролистать к началу',
   select_a_color_from_the_screen: 'Выберите цвет на экране',