feat(Tab): implement full width attribute [run-chromatic][skip-cd] (#740)

Author: clukhei

skills/sgds-components/reference/tab.md

@@ -29,6 +29,7 @@ No CSS styling modifications — custom properties and CSS parts are not exposed
 - `variant` controls visual style: `underlined` (default) or `solid`. Set on `<sgds-tab-group>` — propagates to all child tabs.
 - `orientation` controls layout: `horizontal` (default) or `vertical`. Set on `<sgds-tab-group>`.
 - `density` controls spacing: `default` or `compact`. Set on `<sgds-tab-group>`.
+- `fullWidth` on `<sgds-tab-group>` will stretch tab group to fill the whole width of its container. Only works if `orientation` is set to `horizontal`.
 - Fires `sgds-tab-show` (with `event.detail.name`) when a tab is activated and `sgds-tab-hide` when it is deactivated.
 - No public methods on `<sgds-tab-group>`.
 
@@ -50,7 +51,7 @@ No CSS styling modifications — custom properties and CSS parts are not exposed
 
 - **`panel`/`name` matching**: the link between a tab and its panel is entirely string-based — a typo in either attribute results in a broken tab with no panel displayed. Always verify both values match exactly.
 - **`active` attribute**: sets the initially active tab at render time only; once the tab group is interactive, active state is managed internally and the `active` attribute is not reactively updated.
-- **`variant` and `density` propagation**: these are set on `<sgds-tab-group>` and automatically propagate to all child `<sgds-tab>` elements — do not set them on individual tabs.
+- **`variant`, `orientation`, `density`, and `fullWidth` propagation**: these are set on `<sgds-tab-group>` and automatically propagate to all child `<sgds-tab>` elements — do not set them on individual tabs.
 - **`sgds-tab-show` / `sgds-tab-hide`**: both events fire with `event.detail.name` (the panel name string) — use to lazy-load content, track analytics, or sync URL state with the active tab.
 - **No public methods**: programmatic tab activation is not supported via methods — manage active state by adding/removing the `active` attribute on a `<sgds-tab>` directly if needed.
 
@@ -74,6 +75,8 @@ No CSS styling modifications — custom properties and CSS parts are not exposed
 
 **Compact spacing?** → `density="compact"` on `<sgds-tab-group>`
 
+**Stretch to fill whole width of container?** → `fullWidth` on `<sgds-tab-group>`
+
 **Set initial active tab?** → Add `active` to the specific `<sgds-tab>`
 
 **Set initial active tab (first loaded tab)?** → The first non-disabled tab is active by default
@@ -112,6 +115,14 @@ No CSS styling modifications — custom properties and CSS parts are not exposed
   <sgds-tab-panel name="section2">Section 2 content.</sgds-tab-panel>
 </sgds-tab-group>
 
+<!-- Full width -->
+<sgds-tab-group fullWidth>
+  <sgds-tab slot="nav" panel="tab1" ariaLabel="Section 1">Tab 1</sgds-tab>
+  <sgds-tab slot="nav" panel="tab2" ariaLabel="Section 2">Tab 2</sgds-tab>
+  <sgds-tab-panel name="tab1">Tab 1 content.</sgds-tab-panel>
+  <sgds-tab-panel name="tab2">Tab 2 content.</sgds-tab-panel>
+</sgds-tab-group>
+
 <!-- Listen to tab change -->
 <sgds-tab-group id="my-tabs">
   <sgds-tab slot="nav" panel="a" ariaLabel="Tab A">Tab A</sgds-tab>
@@ -136,6 +147,7 @@ No CSS styling modifications — custom properties and CSS parts are not exposed
 | `variant` | `underlined \| solid` | `underlined` | Visual style of the tab list |
 | `orientation` | `horizontal \| vertical` | `horizontal` | Layout direction of the tabs |
 | `density` | `default \| compact` | `default` | Spacing of the tab items |
+| `fullWidth` | boolean | `false` | Sets whether tab group stretches to fill the whole width of its container. Only works if when `orientation` is set to `horizontal` |
 
 ### `<sgds-tab>`
 
@@ -173,7 +185,7 @@ No CSS styling modifications — custom properties and CSS parts are not exposed
 **For AI agents**:
 1. `<sgds-tab>` must have `slot="nav"` and its `panel` must exactly match a `<sgds-tab-panel>`'s `name`.
 2. **Always add `ariaLabel`** to every `<sgds-tab>` — this is required for accessibility. The value should describe the tab's purpose (usually matches the visible label text).
-3. `variant`, `orientation`, and `density` are set on `<sgds-tab-group>` — they propagate automatically to all child `<sgds-tab>` elements.
+3. `variant`, `orientation`, `density`, and `fullWidth` are set on `<sgds-tab-group>` — they propagate automatically to all child `<sgds-tab>` elements.
 4. `sgds-tab-show` and `sgds-tab-hide` both carry `event.detail.name` which is the panel name string.
 5. To set the initially active tab, add `active` to one `<sgds-tab>` — if none are active, the first non-disabled tab is selected.
 6. There are no public methods on the tab group.

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

@@ -39,6 +39,8 @@ export class SgdsTabGroup extends SgdsElement {
   @property({ type: String, reflect: true }) orientation: "horizontal" | "vertical" = "horizontal";
   /** The density of tabs. Controls the density of all `sgds-tabs` in its slot. It also sets the density attribute of `sgds-tab` */
   @property({ type: String, reflect: true }) density: "compact" | "default" = "default";
+  /** When set, all `sgds-tabs` in its slot will be in full width. Only takes effect when `orientation` is set to `horizontal` */
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
 
   connectedCallback() {
     const whenAllDefined = Promise.all([
@@ -235,6 +237,7 @@ export class SgdsTabGroup extends SgdsElement {
     this._updateTabsAttribute("variant");
     this._updateTabsAttribute("orientation");
     this._updateTabsAttribute("density");
+    this._updateTabsAttribute("fullWidth");
     this._syncTabsAndPanels();
   }
 
@@ -249,6 +252,9 @@ export class SgdsTabGroup extends SgdsElement {
     if (_changedProperties.has("density")) {
       this._updateTabsAttribute("density");
     }
+    if (_changedProperties.has("fullWidth")) {
+      this._updateTabsAttribute("fullWidth");
+    }
   }
 
   render() {

src/components/Tab/tab-group.css

@@ -34,3 +34,7 @@
 :host([variant="underlined"][orientation="vertical"]) .tab-group__nav {
   border-right: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);
 }
+
+:host([fullWidth][orientation="horizontal"]) slot[name="nav"]::slotted(sgds-tab) {
+  width: 100%;
+}

src/components/Tab/tab.css

@@ -75,6 +75,10 @@
   background-color: var(--sgds-bg-translucent-subtle);
 }
 
+:host([fullWidth][orientation="horizontal"]) .tab {
+  justify-content: center;
+}
+
 .tab {
   display: flex;
   align-items: center;

stories/component-templates/Tab/additional.mdx

@@ -49,6 +49,22 @@ By default, tabs are presented horizontally. Set `orientation` to `vertical` for
   <Story of={TabStories.OrientationSolid} />
 </Canvas>
 
+## Full Width
+
+Tabs can be set to fill the full width of its container by setting the `fullWidth` attribute to `true`. The `fullWidth` attribute only takes effect if the `orientation` attribute is also set to `horizontal`.
+
+### Underlined tabs (default)
+
+<Canvas of={TabStories.UnderlinedFullWidth}>
+  <Story of={TabStories.UnderlinedFullWidth} />
+</Canvas>
+
+### Solid tabs
+
+<Canvas of={TabStories.SolidFullWidth}>
+  <Story of={TabStories.SolidFullWidth} />
+</Canvas>
+
 ## Tab events
 
 The `sgds-tab-group` component emits custom events when tabs are shown or hidden, allowing you to perform side effects and track which tab is currently active.

stories/component-templates/Tab/additional.stories.js

@@ -6,6 +6,20 @@ export const SolidVariant = {
   args: { variant: "solid" },
   parameters: {}
 };
+export const UnderlinedFullWidth = {
+  render: Template.bind({}),
+  name: "Full width underlined tabs",
+  args: { fullWidth: true },
+  parameters: {},
+  tags: ["!dev"]
+};
+export const SolidFullWidth = {
+  render: Template.bind({}),
+  name: "Full width solid tabs",
+  args: { variant: "solid", fullWidth: true },
+  parameters: {},
+  tags: ["!dev"]
+};
 export const UnderlinedDensityCompact = {
   render: Template.bind({}),
   name: "Compact density for underlined tabs",

stories/component-templates/Tab/basic.js

@@ -1,8 +1,13 @@
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export const Template = ({ variant, orientation, density }) => html`
-  <sgds-tab-group variant=${ifDefined(variant)} orientation=${ifDefined(orientation)} density=${ifDefined(density)}>
+export const Template = ({ variant, orientation, density, fullWidth }) => html`
+  <sgds-tab-group
+    variant=${ifDefined(variant)}
+    orientation=${ifDefined(orientation)}
+    density=${ifDefined(density)}
+    ?fullWidth=${fullWidth}
+  >
     <sgds-tab slot="nav" panel="home" ariaLabel="Home">Home</sgds-tab>
     <sgds-tab slot="nav" panel="profile" ariaLabel="Profile">Profile</sgds-tab>
     <sgds-tab slot="nav" panel="contact" ariaLabel="Contact">Contact</sgds-tab>

test/tab.test.ts

@@ -160,7 +160,8 @@ describe("<sgds-tab-group>", () => {
   const propsToForwardToChild = [
     { name: "variant", defaultValue: "underlined", changedValue: "solid" },
     { name: "density", defaultValue: "default", changedValue: "compact" },
-    { name: "orientation", defaultValue: "horizontal", changedValue: "vertical" }
+    { name: "orientation", defaultValue: "horizontal", changedValue: "vertical" },
+    { name: "fullWidth", defaultValue: "false", changedValue: "true" }
   ];
   propsToForwardToChild.forEach(({ name, defaultValue, changedValue }) => {
     it(`change of ${name} prop updates its sgds-tab children`, async () => {