feat(tabs): support fullWidth

css/_tabs.scss

@@ -33,6 +33,28 @@
   @include tabs-icon;
 }
 
+/// Tab full-width styles
+/// @access private
+/// @group components
+@mixin tabs-full-width {
+  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav {
+    width: 100%;
+  }
+
+  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav-item {
+    flex: 1;
+  }
+
+  .#{$prefix}--tabs--full-width .#{$prefix}--tabs__nav-link {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+@include exports('tabs-full-width') {
+  @include tabs-full-width;
+}
+
 /// Tab container panel background
 /// @access private
 /// @group components

docs/src/pages/components/Tabs.svx

@@ -41,6 +41,21 @@ By default, each tab has a fixed width of `10rem`. Set `autoWidth` to `true` for
   </svelte:fragment>
 </Tabs>
 
+## Full-width
+
+Set `fullWidth` to `true` for tabs to evenly span the full width of the container.
+
+<Tabs fullWidth>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <svelte:fragment slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </svelte:fragment>
+</Tabs>
+
 ## Reactive example
 
 Use `bind:selected` to create a two-way binding with the selected tab index. This allows you to programmatically control the selected tab and react to tab changes.

src/Tabs/Tab.svelte

@@ -35,8 +35,15 @@
 
   import { getContext, onMount } from "svelte";
 
-  const { selectedTab, useAutoWidth, add, remove, update, change } =
-    getContext("carbon:Tabs");
+  const {
+    selectedTab,
+    useAutoWidth,
+    useFullWidth,
+    add,
+    remove,
+    update,
+    change,
+  } = getContext("carbon:Tabs");
 
   add({ id, label, disabled });
 
@@ -87,7 +94,7 @@
     {id}
     {href}
     class:bx--tabs__nav-link={true}
-    style:width={$useAutoWidth ? "auto" : undefined}
+    style:width={$useFullWidth ? "100%" : $useAutoWidth ? "auto" : undefined}
   >
     <slot>{label}</slot>
     {#if icon}

src/Tabs/Tabs.svelte

@@ -15,6 +15,9 @@
   /** Set to `true` for tabs to have an auto-width */
   export let autoWidth = false;
 
+  /** Set to `true` for tabs to span the full width of the container */
+  export let fullWidth = false;
+
   /**
    * Specify the ARIA label for the chevron icon.
    * @type {string}
@@ -44,6 +47,10 @@
    * @type {import("svelte/store").Writable<boolean>}
    */
   const useAutoWidth = writable(autoWidth);
+  /**
+   * @type {import("svelte/store").Writable<boolean>}
+   */
+  const useFullWidth = writable(fullWidth);
   /**
    * @type {import("svelte/store").Writable<string | undefined>}
    */
@@ -152,6 +159,7 @@
     selectedTab,
     selectedContent,
     useAutoWidth,
+    useFullWidth,
     add,
     remove,
     addContent,
@@ -228,13 +236,15 @@
     dropdownHidden = true;
   }
   $: useAutoWidth.set(autoWidth);
+  $: useFullWidth.set(fullWidth);
 </script>
 
 <div
   bind:this={refRoot}
   role="navigation"
   class:bx--tabs={true}
   class:bx--tabs--container={type === "container"}
+  class:bx--tabs--full-width={fullWidth}
   {...$$restProps}
 >
   <div

tests/Tabs/Tabs.test.svelte

@@ -4,6 +4,7 @@
   export let selected = 0;
   export let type: "default" | "container" = "default";
   export let autoWidth = false;
+  export let fullWidth = false;
   export let iconDescription = "Show menu options";
   export let triggerHref = "#";
   export let customClass = "";
@@ -14,6 +15,7 @@
   {selected}
   {type}
   {autoWidth}
+  {fullWidth}
   {iconDescription}
   {triggerHref}
   class={customClass}

tests/Tabs/Tabs.test.ts

@@ -28,6 +28,9 @@ describe("Tabs", () => {
     expect(screen.getByText("Content 1")).toBeVisible();
     expect(screen.getByText("Content 2")).not.toBeVisible();
     expect(screen.getByText("Content 3")).not.toBeVisible();
+
+    const tabsContainer = screen.getByRole("navigation");
+    expect(tabsContainer).not.toHaveClass("bx--tabs--full-width");
   });
 
   it("should select initial tab based on selected prop", () => {
@@ -105,6 +108,15 @@ describe("Tabs", () => {
     }
   });
 
+  it("should render full-width tabs when fullWidth is true", () => {
+    render(Tabs, {
+      props: { fullWidth: true },
+    });
+
+    const tabsContainer = screen.getByRole("navigation");
+    expect(tabsContainer).toHaveClass("bx--tabs--full-width");
+  });
+
   it("should show dropdown on trigger click", async () => {
     render(Tabs);