add activation prop

docs/components/tab-group.md

@@ -162,4 +162,22 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
 </sl-tab-group>
 ```
 
+### Manual Activation
+
+When focused, keyboard users can press <kbd>Left</kbd> or <kbd>Right</kbd> to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press <kbd>Space</kbd> or <kbd>Enter</kbd> before showing the tab panel (manual activation).
+
+```html preview
+<sl-tab-group activation="manual">
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+```
+
 [component-metadata:sl-tab-group]

docs/resources/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added `click()` method to `sl-checkbox`, `sl-radio`, and `sl-switch`
+- Added the `activation` prop to `sl-tab-group` to allow for automatic and manual tab activation
 - Fixed a bug in `sl-tooltip` where events weren't properly cleaned up on disconnect
 - Fixed a bug in `sl-tooltip` where they wouldn't display after toggling `disabled` off and on again [#391](https://github.com/shoelace-style/shoelace/issues/391)
 - Fixed a bug in `sl-details` where `show()` and `hide()` would toggle the control when disabled

src/components/tab-group/tab-group.ts

@@ -44,6 +44,12 @@ export default class SlTabGroup extends LitElement {
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
 
+  /**
+   * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+   * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+   */
+  @property() activation: 'auto' | 'manual' = 'auto';
+
   /** Disables the scroll arrows that appear when tabs overflow. */
   @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
 
@@ -177,6 +183,10 @@ export default class SlTabGroup extends LitElement {
 
         this.tabs[index].focus({ preventScroll: true });
 
+        if (this.activation === 'auto') {
+          this.setActiveTab(this.tabs[index]);
+        }
+
         if (['top', 'bottom'].includes(this.placement)) {
           scrollIntoView(this.tabs[index], this.nav, 'horizontal');
         }