npm - @siemens/ix-docs - Versions diffs - 4.3.0 → 5.0.0 - Mend

@siemens/ix-docs 4.3.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2698) hide show

package/build/docs/autogenerated/prompt/ix-tabs/readme.md CHANGED Viewed

@@ -3,10 +3,244 @@
 ## HTML Examples
+### Example: about-and-legal
+```html
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About and legal example</title>
+  </head>
+  <body>
+    <ix-application>
+      <ix-application-header>
+        <div class="placeholder-logo" slot="logo"></div>
+      </ix-application-header>
+      <ix-menu>
+        <ix-menu-about suppress-legacy-tabs>
+          <ix-tabs active-tab-key="tab-1">
+            <ix-tab-item tab-key="tab-1">Tab 1</ix-tab-item>
+            <ix-tab-item tab-key="tab-2">Tab 2</ix-tab-item>
+          </ix-tabs>
+          <section
+            role="tabpanel"
+            aria-label="About and legal content"
+            data-tab-content="tab-1"
+          >
+            Content 1
+          </section>
+          <section
+            role="tabpanel"
+            aria-label="About and legal content"
+            data-tab-content="tab-2"
+            hidden
+          >
+            Content 2
+          </section>
+        </ix-menu-about>
+      </ix-menu>
+    </ix-application>
+    <script>
+      (async function () {
+        await window.customElements.whenDefined('ix-menu');
+        await window.customElements.whenDefined('ix-tabs');
+        const instance = document.querySelector('ix-menu');
+        const about = instance.querySelector('ix-menu-about');
+        const tabs = about.querySelector('ix-tabs');
+        const updateVisibleContent = (tabKey) => {
+          about.querySelectorAll('[data-tab-content]').forEach((content) => {
+            content.hidden = content.dataset.tabContent !== tabKey;
+          });
+        };
+        updateVisibleContent(tabs.activeTabKey ?? 'tab-1');
+        tabs.addEventListener('tabChange', (event) => {
+          updateVisibleContent(event.detail ?? 'tab-1');
+        });
+        await instance.toggleAbout(true);
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: settings
+```html
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Settings example</title>
+  </head>
+  <body>
+    <ix-application>
+      <ix-application-header>
+        <div class="placeholder-logo" slot="logo"></div>
+      </ix-application-header>
+      <ix-menu>
+        <ix-menu-settings suppress-legacy-tabs>
+          <ix-tabs active-tab-key="tab-1">
+            <ix-tab-item tab-key="tab-1">Example Setting 1</ix-tab-item>
+            <ix-tab-item tab-key="tab-2">Example Setting 2</ix-tab-item>
+          </ix-tabs>
+          <section
+            role="tabpanel"
+            aria-label="Settings content"
+            data-tab-content="tab-1"
+          >
+            Example Setting 1 content
+          </section>
+          <section
+            role="tabpanel"
+            aria-label="Settings content"
+            data-tab-content="tab-2"
+            hidden
+          >
+            Example Setting 2 content
+          </section>
+        </ix-menu-settings>
+      </ix-menu>
+    </ix-application>
+    <script>
+      (async function () {
+        await window.customElements.whenDefined('ix-menu');
+        await window.customElements.whenDefined('ix-tabs');
+        const menu = document.querySelector('ix-menu');
+        const settings = menu.querySelector('ix-menu-settings');
+        const tabs = settings.querySelector('ix-tabs');
+        const updateVisibleContent = (tabKey) => {
+          settings.querySelectorAll('[data-tab-content]').forEach((content) => {
+            content.hidden = content.dataset.tabContent !== tabKey;
+          });
+        };
+        updateVisibleContent(tabs.activeTabKey ?? 'tab-1');
+        tabs.addEventListener('tabChange', (event) => {
+          updateVisibleContent(event.detail ?? 'tab-1');
+        });
+        await menu.toggleSettings(true);
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: tabs-overflow
+```html
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tabs overflow example</title>
+    <link rel="stylesheet" href="./tabs.css" />
+  </head>
+  <body>
+    <div class="tabs" style="max-width: 340px">
+      <ix-tabs active-tab-key="overview" layout="auto">
+        <ix-tab-item tab-key="overview">Overview</ix-tab-item>
+        <ix-tab-item tab-key="analytics">Analytics</ix-tab-item>
+        <ix-tab-item tab-key="events">Events</ix-tab-item>
+        <ix-tab-item tab-key="automation">Automation</ix-tab-item>
+        <ix-tab-item tab-key="data-sources">Data Sources</ix-tab-item>
+        <ix-tab-item tab-key="notifications">Notifications</ix-tab-item>
+        <ix-tab-item tab-key="history">History</ix-tab-item>
+        <ix-tab-item tab-key="settings">Settings</ix-tab-item>
+      </ix-tabs>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="overview"
+        class="show"
+      >
+        Content Overview
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="analytics"
+      >
+        Content Analytics
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="events"
+      >
+        Content Events
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="automation"
+      >
+        Content Automation
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="data-sources"
+      >
+        Content Data Sources
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="notifications"
+      >
+        Content Notifications
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="history"
+      >
+        Content History
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="settings"
+      >
+        Content Settings
+      </section>
+    </div>
+    <script type="module">
+      await globalThis.customElements.whenDefined('ix-tabs');
+      const container = document.querySelector('.tabs');
+      const tabs = container.querySelector('ix-tabs');
+      const updateVisibleContent = (tabKey) => {
+        const contentList = container.querySelectorAll('[data-tab-content]');
+        contentList.forEach((content) => {
+          content.classList.toggle(
+            'show',
+            content.dataset.tabContent === tabKey
+          );
+        });
+      };
+      updateVisibleContent(tabs.activeTabKey);
+      tabs.addEventListener('tabChange', (event) => {
+        updateVisibleContent(event.detail);
+      });
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
 ### Example: tabs-rounded
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -34,15 +268,29 @@
   </head>
   <body>
     <ix-tabs rounded>
-      <ix-tab-item><ix-icon name="success"></ix-icon></ix-tab-item>
-      <ix-tab-item counter="200"><ix-icon name="tree"></ix-icon></ix-tab-item>
-      <ix-tab-item><ix-icon name="maintenance"></ix-icon></ix-tab-item>
-      <ix-tab-item disabled counter="24"
-        ><ix-icon name="sound-loud"></ix-icon
+      <ix-tab-item tab-key="success" label="Success"
+        ><ix-icon name="success" aria-label="Success"></ix-icon
+      ></ix-tab-item>
+      <ix-tab-item tab-key="tree" label="Tree" counter="200"
+        ><ix-icon name="tree" aria-label="Tree"></ix-icon
+      ></ix-tab-item>
+      <ix-tab-item tab-key="maintenance" label="Maintenance"
+        ><ix-icon name="maintenance" aria-label="Maintenance"></ix-icon
       ></ix-tab-item>
-      <ix-tab-item><ix-icon name="hierarchy"></ix-icon></ix-tab-item>
-      <ix-tab-item disabled
-        ><ix-icon name="calendar-settings"></ix-icon
+      <ix-tab-item tab-key="sound" label="Sound" disabled counter="24"
+        ><ix-icon name="sound-loud" aria-label="Sound"></ix-icon
+      ></ix-tab-item>
+      <ix-tab-item tab-key="hierarchy" label="Hierarchy"
+        ><ix-icon name="hierarchy" aria-label="Hierarchy"></ix-icon
+      ></ix-tab-item>
+      <ix-tab-item
+        tab-key="calendar-settings"
+        label="Calendar settings"
+        disabled
+        ><ix-icon
+          name="calendar-settings"
+          aria-label="Calendar settings"
+        ></ix-icon
       ></ix-tab-item>
     </ix-tabs>
     <script type="module" src="./init.js"></script>
@@ -53,7 +301,7 @@
 ### Example: tabs
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -62,35 +310,55 @@
   </head>
   <body>
     <div class="tabs">
-      <ix-tabs>
-        <ix-tab-item data-tab-id="0">Tab 1</ix-tab-item>
-        <ix-tab-item data-tab-id="1">Tab 2</ix-tab-item>
-        <ix-tab-item data-tab-id="2">Tab 3</ix-tab-item>
+      <ix-tabs active-tab-key="tab-1">
+        <ix-tab-item tab-key="tab-1">Tab 1</ix-tab-item>
+        <ix-tab-item tab-key="tab-2">Tab 2</ix-tab-item>
+        <ix-tab-item tab-key="tab-3">Tab 3</ix-tab-item>
       </ix-tabs>
-      <div data-tab-content="0" class="show">Content Tab 1</div>
-      <div data-tab-content="1">Content Tab 2</div>
-      <div data-tab-content="2">Content Tab 3</div>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="tab-1"
+        class="show"
+      >
+        Content Tab 1
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="tab-2"
+      >
+        Content Tab 2
+      </section>
+      <section
+        role="tabpanel"
+        aria-label="Example content"
+        data-tab-content="tab-3"
+      >
+        Content Tab 3
+      </section>
     </div>
     <script>
       (async function () {
         await window.customElements.whenDefined('ix-tabs');
-        const tabs = document.querySelectorAll('ix-tab-item[data-tab-id]');
-        function registerClickListener(tab) {
-          tab.addEventListener('click', (tabContent) => {
-            const contentList = document.querySelectorAll('[data-tab-content]');
-            contentList.forEach((content) => {
-              if (content.dataset.tabContent === tab.dataset.tabId) {
-                content.classList.add('show');
-              } else {
-                content.classList.remove('show');
-              }
-            });
+        const container = document.querySelector('.tabs');
+        const tabs = container.querySelector('ix-tabs');
+        const updateVisibleContent = (tabKey) => {
+          const contentList = container.querySelectorAll('[data-tab-content]');
+          contentList.forEach((content) => {
+            content.classList.toggle(
+              'show',
+              content.dataset.tabContent === tabKey
+            );
           });
-        }
+        };
-        tabs.forEach(registerClickListener);
+        updateVisibleContent(tabs.activeTabKey);
+        tabs.addEventListener('tabChange', (event) => {
+          updateVisibleContent(event.detail);
+        });
       })();
     </script>
     <script type="module" src="./init.js"></script>
@@ -100,6 +368,157 @@
 ## React Examples
+### Example: about-and-legal
+```tsx
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuAbout,
+  IxTabItem,
+  IxTabs,
+} from '@siemens/ix-react';
+import { useLayoutEffect, useRef, useState } from 'react';
+export default () => {
+  const ref = useRef<HTMLIxMenuElement>(null);
+  const [activeTabKey, setActiveTabKey] = useState('tab-1');
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element) {
+      element.toggleAbout(true);
+    }
+  }, []);
+  return (
+    <IxApplication>
+      <IxApplicationHeader>
+        <div className="placeholder-logo" slot="logo"></div>
+      </IxApplicationHeader>
+      <IxMenu ref={ref}>
+        <IxMenuAbout suppressLegacyTabs>
+          <IxTabs
+            activeTabKey={activeTabKey}
+            onTabChange={({ detail }) => setActiveTabKey(detail ?? 'tab-1')}
+          >
+            <IxTabItem tabKey="tab-1">Tab 1</IxTabItem>
+            <IxTabItem tabKey="tab-2">Tab 2</IxTabItem>
+          </IxTabs>
+          {activeTabKey === 'tab-1' ? (
+            <section role="tabpanel" aria-label="About and legal content">
+              Content 1
+            </section>
+          ) : null}
+          {activeTabKey === 'tab-2' ? (
+            <section role="tabpanel" aria-label="About and legal content">
+              Content 2
+            </section>
+          ) : null}
+        </IxMenuAbout>
+      </IxMenu>
+    </IxApplication>
+  );
+};
+```
+### Example: settings
+```tsx
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuSettings,
+  IxTabItem,
+  IxTabs,
+} from '@siemens/ix-react';
+import { useLayoutEffect, useRef, useState } from 'react';
+export default () => {
+  const ref = useRef<HTMLIxMenuElement>(null);
+  const [activeTabKey, setActiveTabKey] = useState('tab-1');
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.toggleSettings(true);
+    }
+  }, []);
+  return (
+    <IxApplication>
+      <IxApplicationHeader>
+        <div className="placeholder-logo" slot="logo"></div>
+      </IxApplicationHeader>
+      <IxMenu ref={ref}>
+        <IxMenuSettings suppressLegacyTabs>
+          <IxTabs
+            activeTabKey={activeTabKey}
+            onTabChange={({ detail }) => setActiveTabKey(detail ?? 'tab-1')}
+          >
+            <IxTabItem tabKey="tab-1">Example Setting 1</IxTabItem>
+            <IxTabItem tabKey="tab-2">Example Setting 2</IxTabItem>
+          </IxTabs>
+          {activeTabKey === 'tab-1' ? (
+            <section role="tabpanel" aria-label="Settings content">
+              Example Setting 1 content
+            </section>
+          ) : null}
+          {activeTabKey === 'tab-2' ? (
+            <section role="tabpanel" aria-label="Settings content">
+              Example Setting 2 content
+            </section>
+          ) : null}
+        </IxMenuSettings>
+      </IxMenu>
+    </IxApplication>
+  );
+};
+```
+### Example: tabs-overflow
+```tsx
+import './tabs.scoped.css';
+import { IxTabItem, IxTabs } from '@siemens/ix-react';
+import { useState } from 'react';
+const OVERFLOW_TABS = [
+  { tabKey: 'overview', label: 'Overview' },
+  { tabKey: 'analytics', label: 'Analytics' },
+  { tabKey: 'events', label: 'Events' },
+  { tabKey: 'automation', label: 'Automation' },
+  { tabKey: 'data-sources', label: 'Data Sources' },
+  { tabKey: 'notifications', label: 'Notifications' },
+  { tabKey: 'history', label: 'History' },
+  { tabKey: 'settings', label: 'Settings' },
+];
+export default function TabsOverflow() {
+  const [activeTabKey, setActiveTabKey] = useState('overview');
+  return (
+    <div className="tabs" style={{ maxWidth: 340 }}>
+      <IxTabs
+        activeTabKey={activeTabKey}
+        layout="auto"
+        onTabChange={({ detail }) => setActiveTabKey(detail ?? 'overview')}
+      >
+        {OVERFLOW_TABS.map(({ tabKey, label }) => (
+          <IxTabItem key={tabKey} tabKey={tabKey}>
+            {label}
+          </IxTabItem>
+        ))}
+      </IxTabs>
+      <section role="tabpanel" aria-label="Example content">
+        Content{' '}
+        {OVERFLOW_TABS.find((tab) => tab.tabKey === activeTabKey)?.label}
+      </section>
+    </div>
+  );
+}
+```
 ### Example: tabs-rounded
 ```tsx
 import { IxIcon, IxTabItem, IxTabs } from '@siemens/ix-react';
@@ -115,23 +534,26 @@ import {
 export default () => {
   return (
     <IxTabs rounded>
-      <IxTabItem>
-        <IxIcon name={iconSuccess}></IxIcon>
+      <IxTabItem tabKey="success" label="Success">
+        <IxIcon name={iconSuccess} aria-label="Success"></IxIcon>
       </IxTabItem>
-      <IxTabItem counter={200}>
-        <IxIcon name={iconTree}></IxIcon>
+      <IxTabItem tabKey="tree" label="Tree" counter={200}>
+        <IxIcon name={iconTree} aria-label="Tree"></IxIcon>
       </IxTabItem>
-      <IxTabItem>
-        <IxIcon name={iconMaintenance}></IxIcon>
+      <IxTabItem tabKey="maintenance" label="Maintenance">
+        <IxIcon name={iconMaintenance} aria-label="Maintenance"></IxIcon>
       </IxTabItem>
-      <IxTabItem disabled counter={24}>
-        <IxIcon name={iconSoundLoud}></IxIcon>
+      <IxTabItem tabKey="sound" label="Sound" disabled counter={24}>
+        <IxIcon name={iconSoundLoud} aria-label="Sound"></IxIcon>
       </IxTabItem>
-      <IxTabItem>
-        <IxIcon name={iconHierarchy}></IxIcon>
+      <IxTabItem tabKey="hierarchy" label="Hierarchy">
+        <IxIcon name={iconHierarchy} aria-label="Hierarchy"></IxIcon>
       </IxTabItem>
-      <IxTabItem disabled>
-        <IxIcon name={iconCalendarSettings}></IxIcon>
+      <IxTabItem tabKey="calendar-settings" label="Calendar settings" disabled>
+        <IxIcon
+          name={iconCalendarSettings}
+          aria-label="Calendar settings"
+        ></IxIcon>
       </IxTabItem>
     </IxTabs>
   );
@@ -146,20 +568,23 @@ import { IxTabItem, IxTabs } from '@siemens/ix-react';
 import { useState } from 'react';
 export default () => {
-  const [selectedTab, setSelectedTab] = useState(0);
-  const changeTab = (tabId: number) => setSelectedTab(tabId);
+  const [activeTabKey, setActiveTabKey] = useState('tab-1');
   return (
     <div className="tabs">
-      <IxTabs selected={selectedTab}>
-        <IxTabItem onClick={() => changeTab(0)}>Tab 1</IxTabItem>
-        <IxTabItem onClick={() => changeTab(1)}>Tab 2</IxTabItem>
-        <IxTabItem onClick={() => changeTab(2)}>Tab 3</IxTabItem>
+      <IxTabs
+        activeTabKey={activeTabKey}
+        onTabChange={({ detail }) => setActiveTabKey(detail ?? 'tab-1')}
+      >
+        <IxTabItem tabKey="tab-1">Tab 1</IxTabItem>
+        <IxTabItem tabKey="tab-2">Tab 2</IxTabItem>
+        <IxTabItem tabKey="tab-3">Tab 3</IxTabItem>
       </IxTabs>
-      {selectedTab === 0 ? <div>Content 1</div> : null}
-      {selectedTab === 1 ? <div>Content 2</div> : null}
-      {selectedTab === 2 ? <div>Content 3</div> : null}
+      <section role="tabpanel" aria-label="Example content">
+        {activeTabKey === 'tab-1' ? <>Content Tab 1</> : null}
+        {activeTabKey === 'tab-2' ? <>Content Tab 2</> : null}
+        {activeTabKey === 'tab-3' ? <>Content Tab 3</> : null}
+      </section>
     </div>
   );
 };
@@ -167,6 +592,169 @@ export default () => {
 ## Vue Examples
+### Example: about-and-legal
+```tsx
+<script setup lang="ts">
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuAbout,
+  IxTabItem,
+  IxTabs,
+} from '@siemens/ix-vue';
+import { onMounted, ref, useTemplateRef } from 'vue';
+const input = useTemplateRef<InstanceType<typeof IxMenu>>('menu');
+const activeTabKey = ref('tab-1');
+const setActiveTabKey = (event: CustomEvent<string | undefined>) => {
+  activeTabKey.value = event.detail ?? 'tab-1';
+};
+onMounted(() => {
+  input.value?.$el?.toggleAbout(true);
+});
+</script>
+<template>
+  <IxApplication>
+    <IxApplicationHeader>
+      <div className="placeholder-logo" slot="logo"></div>
+    </IxApplicationHeader>
+    <IxMenu ref="menu">
+      <IxMenuAbout suppressLegacyTabs>
+        <IxTabs :activeTabKey="activeTabKey" @tabChange="setActiveTabKey">
+          <IxTabItem tabKey="tab-1">Tab 1</IxTabItem>
+          <IxTabItem tabKey="tab-2">Tab 2</IxTabItem>
+        </IxTabs>
+        <section
+          v-if="activeTabKey === 'tab-1'"
+          role="tabpanel"
+          aria-label="About and legal content"
+        >
+          Content 1
+        </section>
+        <section
+          v-if="activeTabKey === 'tab-2'"
+          role="tabpanel"
+          aria-label="About and legal content"
+        >
+          Content 2
+        </section>
+      </IxMenuAbout>
+    </IxMenu>
+  </IxApplication>
+</template>
+```
+### Example: settings
+```tsx
+<script setup lang="ts">
+import {
+  HTMLRefElement,
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuSettings,
+  IxTabItem,
+  IxTabs,
+} from '@siemens/ix-vue';
+import { nextTick, onMounted, ref } from 'vue';
+const menu = ref<HTMLRefElement<HTMLIxMenuElement>>();
+const activeTabKey = ref('tab-1');
+const setActiveTabKey = (event: CustomEvent<string | undefined>) => {
+  activeTabKey.value = event.detail ?? 'tab-1';
+};
+onMounted(async () => {
+  await nextTick();
+  menu.value?.$el.toggleSettings(true);
+});
+</script>
+<template>
+  <IxApplication>
+    <IxApplicationHeader>
+      <div className="placeholder-logo" slot="logo"></div>
+    </IxApplicationHeader>
+    <IxMenu ref="menu">
+      <IxMenuSettings>
+        <IxTabs :activeTabKey="activeTabKey" @tabChange="setActiveTabKey">
+          <IxTabItem tabKey="tab-1">Example Setting 1</IxTabItem>
+          <IxTabItem tabKey="tab-2">Example Setting 2</IxTabItem>
+        </IxTabs>
+        <section
+          v-if="activeTabKey === 'tab-1'"
+          role="tabpanel"
+          aria-label="Settings content"
+        >
+          Example Setting 1 content
+        </section>
+        <section
+          v-if="activeTabKey === 'tab-2'"
+          role="tabpanel"
+          aria-label="Settings content"
+        >
+          Example Setting 2 content
+        </section>
+      </IxMenuSettings>
+    </IxMenu>
+  </IxApplication>
+</template>
+```
+### Example: tabs-overflow
+```tsx
+<script setup lang="ts">
+import { IxTabItem, IxTabs } from '@siemens/ix-vue';
+import { ref } from 'vue';
+const OVERFLOW_TABS = [
+  { tabKey: 'overview', label: 'Overview' },
+  { tabKey: 'analytics', label: 'Analytics' },
+  { tabKey: 'events', label: 'Events' },
+  { tabKey: 'automation', label: 'Automation' },
+  { tabKey: 'data-sources', label: 'Data Sources' },
+  { tabKey: 'notifications', label: 'Notifications' },
+  { tabKey: 'history', label: 'History' },
+  { tabKey: 'settings', label: 'Settings' },
+];
+const activeTabKey = ref('overview');
+const setActiveTabKey = (event: CustomEvent<string | undefined>) => {
+  activeTabKey.value = event.detail ?? 'overview';
+};
+</script>
+<style scoped src="./tabs.css"></style>
+<template>
+  <div class="tabs" :style="{ maxWidth: '340px' }">
+    <IxTabs
+      :activeTabKey="activeTabKey"
+      layout="auto"
+      @tabChange="setActiveTabKey"
+    >
+      <IxTabItem
+        v-for="{ tabKey, label } in OVERFLOW_TABS"
+        :key="tabKey"
+        :tabKey="tabKey"
+      >
+        {{ label }}
+      </IxTabItem>
+    </IxTabs>
+    <section role="tabpanel" aria-label="Example content">
+      Content
+      {{ OVERFLOW_TABS.find((tab) => tab.tabKey === activeTabKey)?.label }}
+    </section>
+  </div>
+</template>
+```
 ### Example: tabs-rounded
 ```tsx
 <script setup lang="ts">
@@ -183,23 +771,26 @@ import { IxIcon, IxTabItem, IxTabs } from '@siemens/ix-vue';
 <template>
   <IxTabs rounded>
-    <IxTabItem>
-      <IxIcon :name="iconSuccess"></IxIcon>
+    <IxTabItem tabKey="success" label="Success">
+      <IxIcon :name="iconSuccess" aria-label="Success"></IxIcon>
     </IxTabItem>
-    <IxTabItem :counter="200">
-      <IxIcon :name="iconTree"></IxIcon>
+    <IxTabItem tabKey="tree" label="Tree" :counter="200">
+      <IxIcon :name="iconTree" aria-label="Tree"></IxIcon>
     </IxTabItem>
-    <IxTabItem>
-      <IxIcon :name="iconMaintenance"></IxIcon>
+    <IxTabItem tabKey="maintenance" label="Maintenance">
+      <IxIcon :name="iconMaintenance" aria-label="Maintenance"></IxIcon>
     </IxTabItem>
-    <IxTabItem disabled :counter="24">
-      <IxIcon :name="iconSoundLoud"></IxIcon>
+    <IxTabItem tabKey="sound" label="Sound" disabled :counter="24">
+      <IxIcon :name="iconSoundLoud" aria-label="Sound"></IxIcon>
     </IxTabItem>
-    <IxTabItem>
-      <IxIcon :name="iconHierarchy"></IxIcon>
+    <IxTabItem tabKey="hierarchy" label="Hierarchy">
+      <IxIcon :name="iconHierarchy" aria-label="Hierarchy"></IxIcon>
     </IxTabItem>
-    <IxTabItem disabled>
-      <IxIcon :name="iconCalendarSettings"></IxIcon>
+    <IxTabItem tabKey="calendar-settings" label="Calendar settings" disabled>
+      <IxIcon
+        :name="iconCalendarSettings"
+        aria-label="Calendar settings"
+      ></IxIcon>
     </IxTabItem>
   </IxTabs>
 </template>
@@ -211,28 +802,212 @@ import { IxIcon, IxTabItem, IxTabs } from '@siemens/ix-vue';
 import { IxTabItem, IxTabs } from '@siemens/ix-vue';
 import { ref } from 'vue';
-const selectedTab = ref(0);
-const changeTab = (tabId: number) => (selectedTab.value = tabId);
+const activeTabKey = ref('tab-1');
+const setActiveTabKey = (event: CustomEvent<string | undefined>) => {
+  activeTabKey.value = event.detail ?? 'tab-1';
+};
 </script>
 <style scoped src="./tabs.css"></style>
 <template>
   <div class="tabs">
-    <IxTabs :selected="selectedTab">
-      <IxTabItem @click="changeTab(0)">Tab 1</IxTabItem>
-      <IxTabItem @click="changeTab(1)">Tab 2</IxTabItem>
-      <IxTabItem @click="changeTab(2)">Tab 3</IxTabItem>
+    <IxTabs :activeTabKey="activeTabKey" @tabChange="setActiveTabKey">
+      <IxTabItem tabKey="tab-1">Tab 1</IxTabItem>
+      <IxTabItem tabKey="tab-2">Tab 2</IxTabItem>
+      <IxTabItem tabKey="tab-3">Tab 3</IxTabItem>
     </IxTabs>
-    <div v-show="selectedTab === 0">Content 1</div>
-    <div v-show="selectedTab === 1">Content 2</div>
-    <div v-show="selectedTab === 2">Content 3</div>
+    <section
+      role="tabpanel"
+      aria-label="Example content"
+      v-show="activeTabKey === 'tab-1'"
+    >
+      Content Tab 1
+    </section>
+    <section
+      role="tabpanel"
+      aria-label="Example content"
+      v-show="activeTabKey === 'tab-2'"
+    >
+      Content Tab 2
+    </section>
+    <section
+      role="tabpanel"
+      aria-label="Example content"
+      v-show="activeTabKey === 'tab-3'"
+    >
+      Content Tab 3
+    </section>
   </div>
 </template>
 ```
 ## Angular Examples
+### Example: about-and-legal
+#### Component typescript
+```typescript
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './about-and-legal.html',
+})
+export default class AboutAndLegal implements AfterViewInit {
+  @ViewChild('menu', { read: ElementRef })
+  menuRef!: ElementRef<HTMLIxMenuElement>;
+  activeTabKey = 'tab-1';
+  ngAfterViewInit() {
+    const { nativeElement } = this.menuRef;
+    nativeElement.toggleAbout(true);
+  }
+}
+```
+#### Component template
+```html
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu #menu>
+    <ix-menu-about suppressLegacyTabs>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Tab 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Tab 2</ix-tab-item>
+      </ix-tabs>
+      @if (activeTabKey === 'tab-1') {
+      <section role="tabpanel" aria-label="About and legal content">
+        Content 1
+      </section>
+      } @else {
+      <section role="tabpanel" aria-label="About and legal content">
+        Content 2
+      </section>
+      }
+    </ix-menu-about>
+  </ix-menu>
+</ix-application>
+```
+### Example: settings
+#### Component typescript
+```typescript
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './settings.html',
+})
+export default class Settings implements AfterViewInit {
+  @ViewChild('menu', { read: ElementRef })
+  menuRef!: ElementRef<HTMLIxMenuElement>;
+  activeTabKey = 'tab-1';
+  ngAfterViewInit() {
+    const { nativeElement } = this.menuRef;
+    nativeElement.toggleSettings(true);
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu #menu>
+    <ix-menu-settings suppressLegacyTabs>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Example Setting 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Example Setting 2</ix-tab-item>
+      </ix-tabs>
+      @if (activeTabKey === 'tab-1') {
+      <section role="tabpanel" aria-label="Settings content">
+        Example Setting 1 content
+      </section>
+      } @else {
+      <section role="tabpanel" aria-label="Settings content">
+        Example Setting 2 content
+      </section>
+      }
+    </ix-menu-settings>
+  </ix-menu>
+</ix-application>
+```
+### Example: tabs-overflow
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <div class="tabs" style="max-width: 340px;">
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        layout="auto"
+        (tabChange)="activeTabKey = $event.detail ?? 'overview'"
+      >
+        <ix-tab-item tabKey="overview">Overview</ix-tab-item>
+        <ix-tab-item tabKey="analytics">Analytics</ix-tab-item>
+        <ix-tab-item tabKey="events">Events</ix-tab-item>
+        <ix-tab-item tabKey="automation">Automation</ix-tab-item>
+        <ix-tab-item tabKey="data-sources">Data Sources</ix-tab-item>
+        <ix-tab-item tabKey="notifications">Notifications</ix-tab-item>
+        <ix-tab-item tabKey="history">History</ix-tab-item>
+        <ix-tab-item tabKey="settings">Settings</ix-tab-item>
+      </ix-tabs>
+      <section role="tabpanel" aria-label="Example content">
+        @switch (activeTabKey) { @case ('overview') { Content Overview } @case
+        ('analytics') { Content Analytics } @case ('events') { Content Events }
+        @case ('automation') { Content Automation } @case ('data-sources') {
+        Content Data Sources } @case ('notifications') { Content Notifications }
+        @case ('history') { Content History } @case ('settings') { Content
+        Settings } }
+      </section>
+    </div>
+  `,
+  styleUrls: ['./tabs.css'],
+})
+export default class TabsOverflow {
+  activeTabKey = 'overview';
+}
+```
 ### Example: tabs-rounded
 #### Component typescript
 ```typescript
@@ -245,23 +1020,30 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <ix-tabs rounded>
-      <ix-tab-item>
-        <ix-icon name="success"></ix-icon>
+      <ix-tab-item tabKey="success" label="Success">
+        <ix-icon name="success" aria-label="Success"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item counter="200">
-        <ix-icon name="tree"></ix-icon>
+      <ix-tab-item tabKey="tree" label="Tree" counter="200">
+        <ix-icon name="tree" aria-label="Tree"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item>
-        <ix-icon name="maintenance"></ix-icon>
+      <ix-tab-item tabKey="maintenance" label="Maintenance">
+        <ix-icon name="maintenance" aria-label="Maintenance"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item disabled counter="24">
-        <ix-icon name="sound-loud"></ix-icon>
+      <ix-tab-item tabKey="sound" label="Sound" disabled counter="24">
+        <ix-icon name="sound-loud" aria-label="Sound"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item>
-        <ix-icon name="hierarchy"></ix-icon>
+      <ix-tab-item tabKey="hierarchy" label="Hierarchy">
+        <ix-icon name="hierarchy" aria-label="Hierarchy"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item disabled>
-        <ix-icon name="calendar-settings"></ix-icon>
+      <ix-tab-item
+        tabKey="calendar-settings"
+        label="Calendar settings"
+        disabled
+      >
+        <ix-icon
+          name="calendar-settings"
+          aria-label="Calendar settings"
+        ></ix-icon>
       </ix-tab-item>
     </ix-tabs>
   `,
@@ -282,29 +1064,233 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <div class="tabs">
-      <ix-tabs [selected]="selectedTab">
-        <ix-tab-item (click)="changeTab(0)">Tab 1</ix-tab-item>
-        <ix-tab-item (click)="changeTab(1)">Tab 2</ix-tab-item>
-        <ix-tab-item (click)="changeTab(2)">Tab 3</ix-tab-item>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Tab 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Tab 2</ix-tab-item>
+        <ix-tab-item tabKey="tab-3">Tab 3</ix-tab-item>
       </ix-tabs>
-      <div *ngIf="selectedTab === 0">Content Tab 1</div>
-      <div *ngIf="selectedTab === 1">Content Tab 2</div>
-      <div *ngIf="selectedTab === 2">Content Tab 3</div>
+      <section role="tabpanel" aria-label="Example content">
+        @if (activeTabKey === 'tab-1') { Content Tab 1 } @else if (activeTabKey
+        === 'tab-2') { Content Tab 2 } @else if (activeTabKey === 'tab-3') {
+        Content Tab 3 }
+      </section>
     </div>
   `,
   styleUrls: ['./tabs.css'],
 })
 export default class Tabs {
-  selectedTab = 1;
+  activeTabKey = 'tab-1';
+}
+```
+## Angular Standalone Examples
+### Example: about-and-legal
+#### Component typescript
+```typescript
-  changeTab(tabIndex: number) {
-    this.selectedTab = tabIndex;
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuAbout,
+  IxTabItem,
+  IxTabs,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxMenu,
+    IxMenuAbout,
+    IxTabs,
+    IxTabItem,
+  ],
+  templateUrl: './about-and-legal.html',
+})
+export default class AboutAndLegal implements AfterViewInit {
+  @ViewChild('menu', { read: ElementRef })
+  menuRef!: ElementRef<HTMLIxMenuElement>;
+  activeTabKey = 'tab-1';
+  ngAfterViewInit() {
+    const { nativeElement } = this.menuRef;
+    nativeElement.toggleAbout(true);
   }
 }
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu #menu>
+    <ix-menu-about suppressLegacyTabs>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Tab 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Tab 2</ix-tab-item>
+      </ix-tabs>
+      @if (activeTabKey === 'tab-1') {
+      <section role="tabpanel" aria-label="About and legal content">
+        Content 1
+      </section>
+      } @else {
+      <section role="tabpanel" aria-label="About and legal content">
+        Content 2
+      </section>
+      }
+    </ix-menu-about>
+  </ix-menu>
+</ix-application>
 ```
-## Angular Standalone Examples
+### Example: settings
+#### Component typescript
+```typescript
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxMenu,
+  IxMenuSettings,
+  IxTabItem,
+  IxTabs,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxApplication,
+    IxApplicationHeader,
+    IxMenu,
+    IxMenuSettings,
+    IxTabs,
+    IxTabItem,
+  ],
+  templateUrl: './settings.html',
+})
+export default class Settings implements AfterViewInit {
+  @ViewChild('menu', { read: ElementRef })
+  menuRef!: ElementRef<HTMLIxMenuElement>;
+  activeTabKey = 'tab-1';
+  ngAfterViewInit() {
+    const { nativeElement } = this.menuRef;
+    nativeElement.toggleSettings(true);
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-application>
+  <ix-application-header>
+    <div class="placeholder-logo" slot="logo"></div>
+  </ix-application-header>
+  <ix-menu #menu>
+    <ix-menu-settings suppressLegacyTabs>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Example Setting 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Example Setting 2</ix-tab-item>
+      </ix-tabs>
+      @if (activeTabKey === 'tab-1') {
+      <section role="tabpanel" aria-label="Settings content">
+        Example Setting 1 content
+      </section>
+      } @else {
+      <section role="tabpanel" aria-label="Settings content">
+        Example Setting 2 content
+      </section>
+      }
+    </ix-menu-settings>
+  </ix-menu>
+</ix-application>
+```
+### Example: tabs-overflow
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxTabs, IxTabItem } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxTabs, IxTabItem],
+  template: `
+    <div class="tabs" style="max-width: 340px;">
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        layout="auto"
+        (tabChange)="activeTabKey = $event.detail ?? 'overview'"
+      >
+        <ix-tab-item tabKey="overview">Overview</ix-tab-item>
+        <ix-tab-item tabKey="analytics">Analytics</ix-tab-item>
+        <ix-tab-item tabKey="events">Events</ix-tab-item>
+        <ix-tab-item tabKey="automation">Automation</ix-tab-item>
+        <ix-tab-item tabKey="data-sources">Data Sources</ix-tab-item>
+        <ix-tab-item tabKey="notifications">Notifications</ix-tab-item>
+        <ix-tab-item tabKey="history">History</ix-tab-item>
+        <ix-tab-item tabKey="settings">Settings</ix-tab-item>
+      </ix-tabs>
+      <section role="tabpanel" aria-label="Example content">
+        @switch (activeTabKey) { @case ('overview') { Content Overview } @case
+        ('analytics') { Content Analytics } @case ('events') { Content Events }
+        @case ('automation') { Content Automation } @case ('data-sources') {
+        Content Data Sources } @case ('notifications') { Content Notifications }
+        @case ('history') { Content History } @case ('settings') { Content
+        Settings } }
+      </section>
+    </div>
+  `,
+  styleUrls: ['./tabs.css'],
+})
+export default class TabsOverflow {
+  activeTabKey = 'overview';
+}
+```
 ### Example: tabs-rounded
 #### Component typescript
@@ -312,30 +1298,37 @@ export default class Tabs {
 import { Component } from '@angular/core';
-import { IxTabs, IxTabItem, IxIcon } from '@siemens/ix-angular/standalone';
+import { IxIcon, IxTabItem, IxTabs } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxTabs, IxTabItem, IxIcon],
   template: `
     <ix-tabs rounded>
-      <ix-tab-item>
-        <ix-icon name="success"></ix-icon>
+      <ix-tab-item tabKey="success" label="Success">
+        <ix-icon name="success" aria-label="Success"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item counter="200">
-        <ix-icon name="tree"></ix-icon>
+      <ix-tab-item tabKey="tree" label="Tree" counter="200">
+        <ix-icon name="tree" aria-label="Tree"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item>
-        <ix-icon name="maintenance"></ix-icon>
+      <ix-tab-item tabKey="maintenance" label="Maintenance">
+        <ix-icon name="maintenance" aria-label="Maintenance"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item disabled counter="24">
-        <ix-icon name="sound-loud"></ix-icon>
+      <ix-tab-item tabKey="sound" label="Sound" disabled counter="24">
+        <ix-icon name="sound-loud" aria-label="Sound"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item>
-        <ix-icon name="hierarchy"></ix-icon>
+      <ix-tab-item tabKey="hierarchy" label="Hierarchy">
+        <ix-icon name="hierarchy" aria-label="Hierarchy"></ix-icon>
       </ix-tab-item>
-      <ix-tab-item disabled>
-        <ix-icon name="calendar-settings"></ix-icon>
+      <ix-tab-item
+        tabKey="calendar-settings"
+        label="Calendar settings"
+        disabled
+      >
+        <ix-icon
+          name="calendar-settings"
+          aria-label="Calendar settings"
+        ></ix-icon>
       </ix-tab-item>
     </ix-tabs>
   `,
@@ -350,33 +1343,32 @@ export default class TabsRounded {}
 import { Component } from '@angular/core';
-import { NgIf } from '@angular/common';
 import { IxTabs, IxTabItem } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  imports: [IxTabs, IxTabItem, NgIf],
+  imports: [IxTabs, IxTabItem],
   template: `
     <div class="tabs">
-      <ix-tabs [selected]="selectedTab">
-        <ix-tab-item (click)="changeTab(0)">Tab 1</ix-tab-item>
-        <ix-tab-item (click)="changeTab(1)">Tab 2</ix-tab-item>
-        <ix-tab-item (click)="changeTab(2)">Tab 3</ix-tab-item>
+      <ix-tabs
+        [activeTabKey]="activeTabKey"
+        (tabChange)="activeTabKey = $event.detail ?? 'tab-1'"
+      >
+        <ix-tab-item tabKey="tab-1">Tab 1</ix-tab-item>
+        <ix-tab-item tabKey="tab-2">Tab 2</ix-tab-item>
+        <ix-tab-item tabKey="tab-3">Tab 3</ix-tab-item>
       </ix-tabs>
-      <div *ngIf="selectedTab === 0">Content Tab 1</div>
-      <div *ngIf="selectedTab === 1">Content Tab 2</div>
-      <div *ngIf="selectedTab === 2">Content Tab 3</div>
+      <section role="tabpanel" aria-label="Example content">
+        @if (activeTabKey === 'tab-1') { Content Tab 1 } @else if (activeTabKey
+        === 'tab-2') { Content Tab 2 } @else if (activeTabKey === 'tab-3') {
+        Content Tab 3 }
+      </section>
     </div>
   `,
   styleUrls: ['./tabs.css'],
 })
 export default class Tabs {
-  selectedTab = 1;
-  changeTab(tabIndex: number) {
-    this.selectedTab = tabIndex;
-  }
+  activeTabKey = 'tab-1';
 }
 ```
@@ -384,22 +1376,23 @@ export default class Tabs {
 ## Properties
-| Property                          | Attribute                              | Description                                  | Type                    | Default     |
-| --------------------------------- | -------------------------------------- | -------------------------------------------- | ----------------------- | ----------- |
-| `ariaLabelChevronLeftIconButton`  | `aria-label-chevron-left-icon-button`  | ARIA label for the chevron left icon button  | `string \| undefined`   | `undefined` |
-| `ariaLabelChevronRightIconButton` | `aria-label-chevron-right-icon-button` | ARIA label for the chevron right icon button | `string \| undefined`   | `undefined` |
-| `layout`                          | `layout`                               | Set layout width style                       | `"auto" \| "stretched"` | `'auto'`    |
-| `placement`                       | `placement`                            | Set placement style                          | `"bottom" \| "top"`     | `'bottom'`  |
-| `rounded`                         | `rounded`                              | Set rounded tabs                             | `boolean`               | `false`     |
-| `selected`                        | `selected`                             | Set default selected tab by index            | `number`                | `0`         |
-| `small`                           | `small`                                | Set tab items to small size                  | `boolean`               | `false`     |
+| Property             | Attribute              | Description                                                                                                                                                                                                                                              | Type                      | Default           |
+| -------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ----------------- |
+| `activeTabKey`       | `active-tab-key`       | Active tab key.                                                                                                                                                                                                                                          | `string \| undefined`     | `undefined`       |
+| `ariaLabelMoreTabs`  | `aria-label-more-tabs` | Aria label for the overflow menu button.                                                                                                                                                                                                                 | `string`                  | `'Show all tabs'` |
+| `keyboardNavigation` | `keyboard-navigation`  | Keyboard interaction behavior: automatic:  A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus. manual: A tabs widget where users activate a tab and display its panel by pressing Space or Enter. | `"automatic" \| "manual"` | `'automatic'`     |
+| `layout`             | `layout`               | Set layout width style                                                                                                                                                                                                                                   | `"auto" \| "stretched"`   | `'auto'`          |
+| `placement`          | `placement`            | Set placement style                                                                                                                                                                                                                                      | `"bottom" \| "top"`       | `'bottom'`        |
+| `rounded`            | `rounded`              | Set rounded tabs                                                                                                                                                                                                                                         | `boolean`                 | `false`           |
+| `small`              | `small`                | Set tab items to small size                                                                                                                                                                                                                              | `boolean`                 | `false`           |
 ## Events
-| Event            | Description                 | Type                  |
-| ---------------- | --------------------------- | --------------------- |
-| `selectedChange` | `selected` property changed | `CustomEvent<number>` |
+| Event       | Description                                                        | Type                               |
+| ----------- | ------------------------------------------------------------------ | ---------------------------------- |
+| `tabChange` | Tab selection event. Event detail contains the new active tab key. | `CustomEvent<string \| undefined>` |
+| `tabClose`  | Tab close event. Event detail contains the closed tab key.         | `CustomEvent<string \| undefined>` |
 ## Dependencies
@@ -409,9 +1402,21 @@ export default class Tabs {
  - [ix-menu-about](../menu-about)
  - [ix-menu-settings](../menu-settings)
+### Depends on
+- [ix-dropdown-button](../dropdown-button)
+- [ix-dropdown-item](../dropdown-item)
 ### Graph
 ```mermaid
 graph TD;
+  ix-tabs --> ix-dropdown-button
+  ix-tabs --> ix-dropdown-item
+  ix-dropdown-button --> ix-button
+  ix-dropdown-button --> ix-icon-button
+  ix-dropdown-button --> ix-dropdown
+  ix-button --> ix-spinner
+  ix-icon-button --> ix-spinner
   ix-menu-about --> ix-tabs
   ix-menu-settings --> ix-tabs
   style ix-tabs fill:#f9f,stroke:#333,stroke-width:4px