feat(tabs): container type supports icons

Closes #2724

Author: metonym

css/_tabs.scss

@@ -27,6 +27,23 @@
   .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-item--icon svg {
     fill: $disabled-02;
   }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-item--disabled
+    .#{$prefix}--tabs__nav-item--icon
+    svg {
+    fill: $text-on-color-disabled;
+  }
+
+  .#{$prefix}--tabs--container
+    .#{$prefix}--tabs__nav-link:has(.#{$prefix}--tabs__nav-item--icon) {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--icon {
+    margin-inline-start: auto;
+    padding-inline-start: $carbon--spacing-05;
+  }
 }
 
 @include exports('tabs-icon') {

css/all.css

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tab, TabContent, Tabs } from "carbon-components-svelte";
+  import Calendar from "../../src/icons/Calendar.svelte";
+
+  export let icon = Calendar;
+  export let disabled = false;
+  export let label = "Test Tab";
+</script>
+
+<Tabs type="container">
+  <Tab {label} {icon} {disabled} />
+  <Tab label="No Icon" />
+  <svelte:fragment slot="content">
+    <TabContent>Icon content</TabContent>
+    <TabContent>Plain content</TabContent>
+  </svelte:fragment>
+</Tabs>

css/g10.css

@@ -4,6 +4,7 @@ import Settings from "../../src/icons/Settings.svelte";
 import { user } from "../setup-tests";
 import Tab from "./Tab.test.svelte";
 import TabIcon from "./TabIcon.test.svelte";
+import TabIconContainer from "./TabIconContainer.test.svelte";
 import Tabs from "./Tabs.test.svelte";
 import TabsDynamic from "./TabsDynamic.test.svelte";
 import TabsSkeleton from "./TabsSkeleton.test.svelte";
@@ -442,6 +443,81 @@ describe("Tab icon", () => {
   });
 });
 
+describe("Container tabs with icon", () => {
+  it("should render container type with icon", () => {
+    const { container } = render(TabIconContainer, {
+      props: { icon: Calendar },
+    });
+
+    const tabsContainer = screen.getByRole("navigation");
+    expect(tabsContainer).toHaveClass("bx--tabs--container");
+
+    const iconWrapper = container.querySelector(".bx--tabs__nav-item--icon");
+    expect(iconWrapper).toBeInTheDocument();
+
+    const svg = iconWrapper?.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute("width", "16");
+    expect(svg).toHaveAttribute("height", "16");
+  });
+
+  it("should not render icon wrapper on tab without icon in container", () => {
+    const { container } = render(TabIconContainer, {
+      props: { icon: Calendar },
+    });
+
+    const navItems = container.querySelectorAll(".bx--tabs__nav-item");
+    const secondTab = navItems[1];
+    const iconWrapper = secondTab?.querySelector(".bx--tabs__nav-item--icon");
+    expect(iconWrapper).not.toBeInTheDocument();
+  });
+
+  it("should render icon inside nav link in container tabs", () => {
+    const { container } = render(TabIconContainer, {
+      props: { icon: Calendar },
+    });
+
+    const navLink = container.querySelector(".bx--tabs__nav-link");
+    const iconWrapper = navLink?.querySelector(".bx--tabs__nav-item--icon");
+    expect(iconWrapper).toBeInTheDocument();
+  });
+
+  it("should render label and icon together in container tabs", () => {
+    render(TabIconContainer, {
+      props: { label: "Dashboard", icon: Calendar },
+    });
+
+    const tab = screen.getByRole("tab", { name: /Dashboard/ });
+    expect(tab).toBeInTheDocument();
+    expect(tab.querySelector(".bx--tabs__nav-item--icon")).toBeInTheDocument();
+  });
+
+  it("should apply disabled styling when tab with icon is disabled in container", () => {
+    const { container } = render(TabIconContainer, {
+      props: { icon: Settings, disabled: true },
+    });
+
+    const disabledItem = container.querySelector(
+      ".bx--tabs__nav-item--disabled",
+    );
+    expect(disabledItem).toBeInTheDocument();
+
+    const iconWrapper = disabledItem?.querySelector(
+      ".bx--tabs__nav-item--icon",
+    );
+    expect(iconWrapper).toBeInTheDocument();
+  });
+
+  it("should be clickable with icon when enabled in container tabs", async () => {
+    render(TabIconContainer, { props: { icon: Calendar } });
+
+    const tab = screen.getByRole("tab", { name: /Test Tab/ });
+    await user.click(tab);
+
+    expect(tab).toHaveAttribute("aria-selected", "true");
+  });
+});
+
 describe("TabsSkeleton", () => {
   it("should render with default props", () => {
     const { container } = render(TabsSkeleton);