@uh-design-system/component-library 1.5.2 → 1.6.0-rc.0

package/dist/collection/components/01-base-components/ds-tabs/ds-tablist/stories/ds-tablist.stories.js

@@ -0,0 +1,38 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Tabs/TabList',
+    component: 'ds-tablist',
+    args: {
+        variant: 'container',
+        currentTab: 'tab-1',
+        currentTabPanel: 'panel-1',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['container', 'line'],
+        },
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-variant=${args.variant}
+        ds-current-tab=${args.currentTab}
+        ds-current-tab-panel=${args.currentTabPanel}
+        @dsTabChange=${(event) => updateArgs({ currentTab: event.detail.tabId, currentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          <ds-tab ds-text="Tab 1" ds-id="tab-1" ds-tab-panel-id="panel-1"></ds-tab>
+          <ds-tab ds-text="Tab 2" ds-id="tab-2" ds-tab-panel-id="panel-2"></ds-tab>
+          <ds-tab ds-text="Tab 3" ds-id="tab-3" ds-tab-panel-id="panel-3"></ds-tab>
+          <ds-tab ds-text="Tab 4" ds-id="tab-4" ds-tab-panel-id="panel-4"></ds-tab>
+        </ds-tablist>
+      </ds-tabs>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/ds-tabpanel.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabpanel__MsKlb0 {
+.ds-tabpanel__cpPWV0 {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -12,26 +12,26 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-tabpanel__MsKlb0--container {
+.ds-tabpanel__cpPWV0--container {
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   border-block-end: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tabpanel__MsKlb0--padded {
+.ds-tabpanel__cpPWV0--padded {
   padding-block-start: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__MsKlb0--padded {
+  .ds-tabpanel__cpPWV0--padded {
     padding-block-start: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__MsKlb0--container.ds-tabpanel__MsKlb0--padded {
+.ds-tabpanel__cpPWV0--container.ds-tabpanel__cpPWV0--padded {
   padding: var(--ds-spacing-small);
 }
 @media (min-width: 60rem) {
-  .ds-tabpanel__MsKlb0--container.ds-tabpanel__MsKlb0--padded {
+  .ds-tabpanel__cpPWV0--container.ds-tabpanel__cpPWV0--padded {
     padding: var(--ds-spacing-medium);
   }
 }
-.ds-tabpanel__MsKlb0[hidden] {
+.ds-tabpanel__cpPWV0[hidden] {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/ds-tabpanel.js

@@ -13,10 +13,10 @@ export class DsTabpanel extends Mixin(componentFactory('ds-tabpanel'), tabsFacto
     dsPadded = true;
     render() {
         const baseClass = cx('ds-tabpanel');
-        return (h("div", { key: '0381cf5fbffeaa9715ded94760d23a38af385edf', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '6d91e9c0ae540f71066c31928c717be1acf090d0', id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--container`]: this.context?.variant === 'container',
                 [`${baseClass}--padded`]: this.dsPadded,
-            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '7973c2edf975b23ac583c5fa16682e428ff2f0aa' })));
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '7fb5cc034e18a675c0236d433738113f16fe25b9' })));
     }
     static get is() { return "ds-tabpanel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/stories/ds-tabpanel.features.stories.js

@@ -0,0 +1,45 @@
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const meta = {
+    title: 'Base Components/Tabs/TabPanel/Features',
+    component: 'ds-tabpanel',
+    args: {
+        variant: 'container',
+        defaultSlot: '<div class="ds-bodytext-md">Content</div>',
+        dsId: 'panel-1',
+        dsTabId: 'tab-1',
+        dsPadded: true,
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['container', 'line'],
+        },
+    },
+    render: args => html `
+    <ds-tabs ds-variant=${args.variant} ds-current-tab-panel=${args.dsId} ds-current-tab="tab-1">
+      <ds-tabpanel ds-id=${args.dsId} ds-tab-id=${args.dsTabId} ds-padded=${args.dsPadded}> ${unsafeHTML(args.defaultSlot)} </ds-tabpanel>
+    </ds-tabs>
+  `,
+};
+export default meta;
+export const Padded = {};
+export const NotPadded = {
+    args: {
+        dsPadded: false,
+    },
+};
+export const Slots = {
+    render: () => html `
+    <ds-tabs ds-variant="container" ds-current-tab-panel="panel-1" ds-current-tab="tab-1">
+      <ds-tabpanel ds-id="panel-1" ds-tab-id="tab-1"> Default slot </ds-tabpanel>
+    </ds-tabs>
+  `,
+};
+export const CustomTagName = {
+    render: () => html `
+    <custom-ds-tabs ds-variant="container" ds-current-tab-panel="panel-1" ds-current-tab="tab-1">
+      <custom-ds-tabpanel ds-id="panel-1" ds-tab-id="tab-1"> Default slot </custom-ds-tabpanel>
+    </custom-ds-tabs>
+  `,
+};

package/dist/collection/components/01-base-components/ds-tabs/ds-tabpanel/stories/ds-tabpanel.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const meta = {
+    title: 'Base Components/Tabs/TabPanel',
+    component: 'ds-tabpanel',
+    args: {
+        variant: 'container',
+        defaultSlot: '<div class="ds-bodytext-md">Content</div>',
+        dsId: 'panel-1',
+        dsTabId: 'tab-1',
+        dsPadded: true,
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['container', 'line'],
+        },
+    },
+    render: args => html `
+    <ds-tabs ds-variant=${args.variant} ds-current-tab-panel=${args.dsId}>
+      <ds-tabpanel ds-id=${args.dsId} ds-tab-id=${args.dsTabId} ds-padded=${args.dsPadded}> ${unsafeHTML(args.defaultSlot)} </ds-tabpanel>
+    </ds-tabs>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-tabs/ds-tabs.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-tabs__MsKlb0 {
+.ds-tabs__cpPWV0 {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-tabs/ds-tabs.js

@@ -39,7 +39,7 @@ export class DsTabs extends Mixin(componentFactory('ds-tabs', { stopRootTracking
     }
     render() {
         const baseClass = cx('ds-tabs');
-        return (h("div", { key: 'd052d2965d38dbfa76d202898b11acd55d45d16a', class: baseClass }, h("slot", { key: '2c87cb659baf883da5525579609aeb2a4b76949e' })));
+        return (h("div", { key: 'f6a1374d08011b0be56a4738835ef25a80a7069a', class: baseClass }, h("slot", { key: '85cb5f6e408873bede86ba315fa36afd0a5b51c2' })));
     }
     static get is() { return "ds-tabs"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-tabs/stories/ds-tabs.examples.stories.js

@@ -0,0 +1,99 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Tabs/Examples',
+    component: 'ds-tabs',
+    args: {
+        dsCurrentTab: 'tab-1',
+        dsCurrentTabPanel: 'panel-1',
+        dsVariant: 'line',
+    },
+};
+export default meta;
+export const IconStart = {
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          <ds-tab ds-id="tab-1" ds-tab-panel-id="panel-1" ds-text="Checklist" ds-icon-start="checklist"></ds-tab>
+          <ds-tab ds-id="tab-2" ds-tab-panel-id="panel-2" ds-text="Description" ds-icon-start="description"></ds-tab>
+          <ds-tab ds-id="tab-3" ds-tab-panel-id="panel-3" ds-text="Users" ds-icon-start="group"></ds-tab>
+          <ds-tab ds-id="tab-4" ds-tab-panel-id="panel-4" ds-text="History" ds-icon-start="history"></ds-tab>
+        </ds-tablist>
+        <ds-tabpanel ds-id="panel-1" ds-tab-id="tab-1">
+          <div class="ds-bodytext-md">Checklist content</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-2" ds-tab-id="tab-2">
+          <div class="ds-bodytext-md">Description content</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-3" ds-tab-id="tab-3">
+          <div class="ds-bodytext-md">Users content</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-4" ds-tab-id="tab-4">
+          <div class="ds-bodytext-md">History content</div>
+        </ds-tabpanel>
+      </ds-tabs>
+    `;
+    },
+};
+export const IconEnd = {
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Thesis review">
+          <ds-tab ds-id="tab-1" ds-tab-panel-id="panel-1" ds-text="Abstract"></ds-tab>
+          <ds-tab ds-id="tab-2" ds-tab-panel-id="panel-2" ds-text="Methodology"></ds-tab>
+          <ds-tab ds-id="tab-3" ds-tab-panel-id="panel-3" ds-text="Results" ds-icon-end="warning_fill" ds-icon-end-colour="attention"></ds-tab>
+          <ds-tab ds-id="tab-4" ds-tab-panel-id="panel-4" ds-text="Discussion"></ds-tab>
+        </ds-tablist>
+        <ds-tabpanel ds-id="panel-1" ds-tab-id="tab-1">
+          <div class="ds-bodytext-md">Abstract content</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-2" ds-tab-id="tab-2">
+          <div class="ds-bodytext-md">Methodology content</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-3" ds-tab-id="tab-3">
+          <div class="ds-bodytext-md">Results content</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-4" ds-tab-id="tab-4">
+          <div class="ds-bodytext-md">Discussion content</div>
+        </ds-tabpanel>
+      </ds-tabs>
+    `;
+    },
+};
+export const AriaLabelledby = {
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <h2 id="heading" class="ds-heading-lg">Heading</h2>
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-labelledby="heading">
+          ${Array.from({ length: 4 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="Tab ${i + 1}"></ds-tab> `)}
+        </ds-tablist>
+        ${Array.from({ length: 4 }, (_, i) => html `
+            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Tab ${i + 1} content</div>
+            </ds-tabpanel>
+          `)}
+      </ds-tabs>
+    `;
+    },
+};

package/dist/collection/components/01-base-components/ds-tabs/stories/ds-tabs.features.stories.js

@@ -0,0 +1,173 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Tabs/Features',
+    component: 'ds-tabs',
+    args: {
+        dsCurrentTab: 'tab-1',
+        dsCurrentTabPanel: 'panel-1',
+        dsVariant: 'container',
+    },
+};
+export default meta;
+const numberMap = {
+    1: 'First',
+    2: 'Second',
+    3: 'Third',
+    4: 'Fourth',
+    5: 'Fifth',
+    6: 'Sixth',
+    7: 'Seventh',
+    8: 'Eighth',
+    9: 'Ninth',
+    10: 'Tenth',
+};
+export const Container = {
+    args: {
+        dsVariant: 'container',
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          ${Array.from({ length: 3 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
+        </ds-tablist>
+        ${Array.from({ length: 3 }, (_, i) => html `
+            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
+            </ds-tabpanel>
+          `)}
+      </ds-tabs>
+    `;
+    },
+};
+export const Line = {
+    args: {
+        dsVariant: 'line',
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          ${Array.from({ length: 3 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
+        </ds-tablist>
+        ${Array.from({ length: 3 }, (_, i) => html `
+            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
+            </ds-tabpanel>
+          `)}
+      </ds-tabs>
+    `;
+    },
+};
+export const Scrollable = {
+    args: {
+        dsVariant: 'container',
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          ${Array.from({ length: 5 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab long name"></ds-tab> `)}
+        </ds-tablist>
+        ${Array.from({ length: 5 }, (_, i) => html `
+            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab. Resize the viewport so the tabs do not fit within the available width.</div>
+            </ds-tabpanel>
+          `)}
+      </ds-tabs>
+    `;
+    },
+};
+export const Nested = {
+    args: {
+        dsCurrentNestedTab: 'nested-tab-1',
+        dsCurrentNestedTabPanel: 'nested-panel-1',
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant="line"
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          <ds-tab ds-id="tab-1" ds-tab-panel-id="panel-1" ds-text="Tab 1"></ds-tab>
+          <ds-tab ds-id="tab-2" ds-tab-panel-id="panel-2" ds-text="Tab 2"></ds-tab>
+          <ds-tab ds-id="tab-3" ds-tab-panel-id="panel-3" ds-text="Tab 3"></ds-tab>
+        </ds-tablist>
+        <ds-tabpanel ds-id="panel-1" ds-tab-id="tab-1">
+          <div class="ds-mb-sm ds-bodytext-md">Content for Tab 1</div>
+          <ds-tabs
+            ds-current-tab=${args.dsCurrentNestedTab}
+            ds-current-tab-panel=${args.dsCurrentNestedTabPanel}
+            ds-variant="container"
+            @dsTabChange=${(event) => updateArgs({ dsCurrentNestedTab: event.detail.tabId, dsCurrentNestedTabPanel: event.detail.tabPanelId })}
+          >
+            <ds-tablist ds-aria-label="Nested Tab list">
+              <ds-tab ds-id="nested-tab-1" ds-tab-panel-id="nested-panel-1" ds-text="Nested Tab 1"></ds-tab>
+              <ds-tab ds-id="nested-tab-2" ds-tab-panel-id="nested-panel-2" ds-text="Nested Tab 2"></ds-tab>
+            </ds-tablist>
+            <ds-tabpanel ds-id="nested-panel-1" ds-tab-id="nested-tab-1">
+              <div class="ds-bodytext-md">Content for Nested Tab 1</div>
+            </ds-tabpanel>
+            <ds-tabpanel ds-id="nested-panel-2" ds-tab-id="nested-tab-2">
+              <div class="ds-bodytext-md">Content for Nested Tab 2</div>
+            </ds-tabpanel>
+          </ds-tabs>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-2" ds-tab-id="tab-2">
+          <div class="ds-bodytext-md">Content for Tab 2</div>
+        </ds-tabpanel>
+        <ds-tabpanel ds-id="panel-3" ds-tab-id="tab-3">
+          <div class="ds-bodytext-md">Content for Tab 3</div>
+        </ds-tabpanel>
+      </ds-tabs>
+    `;
+    },
+};
+export const Slots = {
+    render: args => html ` <ds-tabs ds-current-tab=${args.dsCurrentTab} ds-current-tab-panel=${args.dsCurrentTabPanel}> Default slot </ds-tabs> `,
+};
+export const CustomTagName = {
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <custom-ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <custom-ds-tablist ds-aria-label="Tab list">
+          ${Array.from({ length: 5 }, (_, i) => html ` <custom-ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></custom-ds-tab> `)}
+        </custom-ds-tablist>
+        ${Array.from({ length: 5 }, (_, i) => html `
+            <custom-ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
+            </custom-ds-tabpanel>
+          `)}
+      </custom-ds-tabs>
+    `;
+    },
+};

package/dist/collection/components/01-base-components/ds-tabs/stories/ds-tabs.stories.js

@@ -0,0 +1,132 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+const numberMap = {
+    1: 'First',
+    2: 'Second',
+    3: 'Third',
+    4: 'Fourth',
+    5: 'Fifth',
+    6: 'Sixth',
+    7: 'Seventh',
+    8: 'Eighth',
+    9: 'Ninth',
+    10: 'Tenth',
+};
+const meta = {
+    title: 'Base Components/Tabs',
+    component: 'ds-tabs',
+    args: {
+        dsCurrentTab: 'tab-1',
+        dsCurrentTabPanel: 'panel-1',
+        dsVariant: 'container',
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: `
+Tabs component for organising related content into different categories,
+allowing users to navigate between them without leaving the page.
+
+## Current tab
+
+The currently active tab is determined by the \`dsCurrentTab\` property,
+which should match the \`dsId\` of one of the child \`ds-tab\` elements.
+The associated tab panel is determined by the \`dsCurrentTabPanel\` property,
+which should match the \`dsId\` of one of the child \`ds-tabpanel\` elements.
+
+## Variant
+
+The variant of the tabs component is determined by the \`dsVariant\` property. The available variants are:
+
+- \`container\` (default): Displays tabs within a container with a background and border.
+- \`line\`: Displays tabs with only a bottom border, without a container background.
+
+## Icons
+
+To add icons to the tabs, use the \`dsIconStart\` and \`dsIconEnd\` properties of the \`ds-tab\` component.
+These properties accept the name of an icon from the design system's icon library.
+
+The \`dsIconEndColour\` property can be used to set the colour of the end icon,
+using the icon colour names from the design system.
+
+## Accessibility
+
+- The \`ds-tablist\` element should have an ARIA label (using \`dsAriaLabel\`)
+or be labelled by another element (using \`dsAriaLabelledby\`) for accessibility.
+- Each \`ds-tab\` should have a corresponding \`ds-tabpanel\` with matching IDs for accessibility.
+
+## Keyboard navigation
+
+The current tab can be focused using the Tab key.
+Once a tab has focus, users can navigate between tabs using the following keyboard shortcuts:
+
+- Left/Right Arrow keys: Move focus between tabs.
+- Home/End keys: Move focus to the first/last tab.
+- Enter/Space keys: Activate the focused tab.
+        `,
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          ${Array.from({ length: 3 }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
+        </ds-tablist>
+        ${Array.from({ length: 3 }, (_, i) => html `
+            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
+            </ds-tabpanel>
+          `)}
+      </ds-tabs>
+    `;
+    },
+};
+export const Playground = {
+    args: {
+        tabCount: 5,
+    },
+    argTypes: {
+        tabCount: {
+            control: { type: 'number', min: 1, max: 10, step: 1 },
+        },
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-tabs
+        ds-current-tab=${args.dsCurrentTab}
+        ds-current-tab-panel=${args.dsCurrentTabPanel}
+        ds-variant=${args.dsVariant}
+        @dsTabChange=${(event) => updateArgs({ dsCurrentTab: event.detail.tabId, dsCurrentTabPanel: event.detail.tabPanelId })}
+      >
+        <ds-tablist ds-aria-label="Tab list">
+          ${Array.from({ length: args.tabCount }, (_, i) => html ` <ds-tab ds-id="tab-${i + 1}" ds-tab-panel-id="panel-${i + 1}" ds-text="${numberMap[i + 1]} tab"></ds-tab> `)}
+        </ds-tablist>
+        ${Array.from({ length: args.tabCount }, (_, i) => html `
+            <ds-tabpanel ds-id="panel-${i + 1}" ds-tab-id="tab-${i + 1}">
+              <div class="ds-bodytext-md">Content for ${numberMap[i + 1]} tab</div>
+            </ds-tabpanel>
+          `)}
+      </ds-tabs>
+      ${args.tabCount > 5
+            ? html `
+            <div class="ds-mt-md">
+              <ds-feedback>
+                <ds-notification ds-variant="attention" ds-heading="Too many tabs" ds-description="You should use at most 5 tabs."></ds-notification>
+              </ds-feedback>
+            </div>
+          `
+            : ''}
+    `;
+    },
+};