@orangesk/orange-design-system 2.0.0-beta.45 → 2.0.0-beta.47

package/src/components/Preview/Preview.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
+import { getElementDisplayName } from "./getElementDisplayName";
 import { PreviewGenerator } from "./PreviewGenerator";
 
 type PreviewProps = React.ComponentProps<typeof PreviewGenerator> & {
@@ -51,21 +52,27 @@ export function Preview({
   codeTypes = ["html", "jsx"],
   ...rest
 }: PreviewProps) {
+  const normalizedChildren = React.Children.toArray(children);
+  const normalizedCode =
+    rest.code == null
+      ? undefined
+      : typeof rest.code === "string" || typeof rest.code === "function"
+        ? rest.code
+        : React.Children.toArray(rest.code);
+  const jsxSource =
+    normalizedCode &&
+    typeof normalizedCode !== "string" &&
+    typeof normalizedCode !== "function"
+      ? normalizedCode
+      : normalizedChildren;
+  const hasMultipleCodeRoots = React.Children.count(jsxSource) > 1;
+
   // Generate JSX string on server
-  const jsxCode = generateJSXString(children, {
+  const jsxCode = generateJSXString(jsxSource, {
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name || "Function",
-    displayName: (el: any) => {
-      // More robust display name handling
-      if (!el) return "Unknown";
-      return (
-        el?.props?.mdxType ||
-        el?.type?.displayName ||
-        el?.type?.name ||
-        (typeof el?.type === "string" ? el.type : "Component")
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType"],
     useBooleanShorthandSyntax: false,
     sortProps: false,
@@ -74,8 +81,14 @@ export function Preview({
 
   // Pass the pre-generated JSX code to PreviewGenerator
   return (
-    <PreviewGenerator {...rest} jsxCode={jsxCode} codeTypes={codeTypes}>
-      {children}
+    <PreviewGenerator
+      {...rest}
+      code={normalizedCode}
+      hasMultipleCodeRoots={hasMultipleCodeRoots}
+      jsxCode={jsxCode}
+      codeTypes={codeTypes}
+    >
+      {normalizedChildren}
     </PreviewGenerator>
   );
 }

package/src/components/Preview/PreviewGenerator.tsx

@@ -17,6 +17,7 @@ import { Card } from "../Card";
 import { Dropdown, DropdownItem } from "../Dropdown";
 import { Icon } from "../Icon";
 import CodeExample from "./CodeExample";
+import { getElementDisplayName } from "./getElementDisplayName";
 import PreviewTitleBar from "./PreviewTitleBar";
 
 import "./styles/style.scss";
@@ -32,16 +33,7 @@ const generateJSXString = (
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name || "Function",
-    displayName: (el: any) => {
-      // More robust display name handling
-      if (!el) return "Unknown";
-      return (
-        el?.props?.mdxType ||
-        el?.type?.displayName ||
-        el?.type?.name ||
-        (typeof el?.type === "string" ? el.type : "Component")
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType"],
     useBooleanShorthandSyntax: false,
     sortProps: false,
@@ -116,7 +108,6 @@ const PREVIEW_BREAKPOINTS: PreviewBreakpoint[] = [
 ];
 
 const IFRAME_VIEWPORT_GUTTER = 16;
-
 const getScreenLikeMinHeight = (width: number | null): number => {
   if (width === null) {
     return 1;
@@ -284,6 +275,7 @@ interface PreviewProps {
   codeTypes?: string[];
   enableFullscreen?: boolean;
   hasCodePreview?: boolean;
+  hasMultipleCodeRoots?: boolean;
   html?: string;
   jsxCode?: string; // Pre-generated JSX string (from server component)
   disableBreakpoints?: boolean;
@@ -344,6 +336,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
   codeTypes = ["html", "jsx"],
   enableFullscreen = true,
   hasCodePreview = true,
+  hasMultipleCodeRoots = false,
   html,
   jsxCode,
   isDark = false,
@@ -419,6 +412,33 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
 
   const themeClass = isDarkMode ? "is-dark" : "is-light";
   const bgClass = getBgClassFromName(previewBackground.label);
+  const applyThemeClassToJsxCode = (value?: string): string | undefined => {
+    if (!value) return value;
+
+    const trimmedValue = value.trim();
+    if (!trimmedValue) return trimmedValue;
+
+    if (hasMultipleCodeRoots) {
+      return `<div className="${themeClass}">\n${trimmedValue}\n</div>`;
+    }
+
+    return trimmedValue.replace(
+      /^<([A-Za-z][\w.]*)((?:\s+[\s\S]*?)?)\s*(\/?)>/,
+      (_, tagName: string, rawAttrs = "", selfClosing = "") => {
+        const attrs = rawAttrs || "";
+
+        if (/\sclassName=/.test(attrs)) {
+          return `<${tagName}${attrs.replace(
+            /className=(['"])(.*?)\1/,
+            (_match: string, quote: string, className: string) =>
+              `className=${quote}${className} ${themeClass}${quote}`,
+          )}${selfClosing ? " /" : ""}>`;
+        }
+
+        return `<${tagName}${attrs}\n  className="${themeClass}"${selfClosing ? " /" : ""}>`;
+      },
+    );
+  };
 
   const classes = cx(CLASS_ROOT, themeClass, bgClass, className);
   const wrapperClasses = cx("previewWrapper", {
@@ -534,28 +554,36 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
       ? children(renderAsFunctionContext)
       : children;
 
-  // Wrap the component to ensure theme classes are applied to the root element
-  const wrapComponentWithTheme = (component: ReactNode) => {
+  const wrapRenderedComponentWithTheme = (component: ReactNode) => {
     if (!component) return component;
 
-    // If it's a single React element, clone it with additional classes
-    if (React.isValidElement(component)) {
-      const props = component.props as any;
-      const existingClassName = props.className || "";
-      const newClassName = cx(existingClassName, themeClass);
+    // Keep wrapper shape stable across SSR/hydration and avoid cloning RSC children.
+    return <div className={cx(themeClass)}>{component}</div>;
+  };
 
-      return React.cloneElement(component, {
+  const wrapCodeWithTheme = (component: ReactNode) => {
+    if (!component) return component;
+
+    const normalizedChildren = React.Children.toArray(component);
+
+    if (
+      normalizedChildren.length === 1 &&
+      React.isValidElement(normalizedChildren[0])
+    ) {
+      const element = normalizedChildren[0] as React.ReactElement<any>;
+      const props = element.props as { className?: string };
+
+      return React.cloneElement(element, {
         ...props,
-        className: newClassName,
-      } as any);
+        className: cx(props.className, themeClass),
+      });
     }
 
-    // For multiple elements or other cases, wrap in a div with theme classes
     return <div className={cx(themeClass)}>{component}</div>;
   };
 
   const toRender = childrenToRender ? (
-    wrapComponentWithTheme(childrenToRender)
+    wrapRenderedComponentWithTheme(childrenToRender)
   ) : html ? (
     <div
       className={cx(themeClass)}
@@ -574,22 +602,18 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
     html;
 
   // Apply the exact same wrapping logic for code display
-  const toCode = codeContent
-    ? wrapComponentWithTheme(codeContent)
-    : codeContent;
+  const toCode = codeContent ? wrapCodeWithTheme(codeContent) : codeContent;
 
   // Generate JSX string for the JSX tab
   // Use pre-generated JSX if provided (from server), otherwise generate client-side
   const generatedJSXCode =
-    jsxCode ||
-    (typeof code === "string"
+    typeof code === "string"
       ? code
-      : toCode
-        ? generateJSXString(toCode, codeJSXOptions)
-        : "");
+      : applyThemeClassToJsxCode(jsxCode) ||
+        (toCode ? generateJSXString(toCode, codeJSXOptions) : "");
 
   // Use toCode for HTML rendering
-  const codeForHTML = toCode;
+  const codeForHTML = codeContent;
 
   const previewViewportWidth = disableBreakpoints
     ? null
@@ -636,6 +660,7 @@ const PreviewGenerator: FunctionComponent<PreviewProps> = ({
           <CodeExample
             codeJSXOptions={codeJSXOptions}
             codeTypes={codeTypes}
+            htmlThemeClass={themeClass}
             jsxCode={generatedJSXCode}
             htmlCode={codeForHTML}
           >

package/src/components/Preview/getElementDisplayName.ts

@@ -0,0 +1,25 @@
+export const getElementDisplayName = (element: any): string => {
+  if (!element) return "Unknown";
+
+  const type = element.type;
+  const clientReferenceId =
+    typeof type?.$$id === "string" ? type.$$id.split("#").pop() : undefined;
+  const payloadValue = type?._payload?.value;
+  const payloadName =
+    typeof payloadValue === "string"
+      ? payloadValue.split("#").pop()
+      : payloadValue?.name;
+
+  return (
+    element?.props?.mdxType ||
+    type?.displayName ||
+    type?.render?.displayName ||
+    type?.render?.name ||
+    type?.name ||
+    type?.type?.displayName ||
+    type?.type?.name ||
+    clientReferenceId ||
+    payloadName ||
+    (typeof type === "string" ? type : "Component")
+  );
+};

package/src/components/Stepbar/styles/config.scss

@@ -5,10 +5,14 @@
 $item-base: (
   display: inline-flex,
   align-items: center,
-  padding-top: space.get("small"),
-  padding-bottom: space.get("small"),
+  padding-top: convert.to-rem(10px),
+  padding-bottom: convert.to-rem(10px),
   margin: 0 0 0 space.get("xsmall"),
-  color: var(--color-text-default),
+  color: var(--stepbar-item-color),
+  background: var(--stepbar-item-background),
+  --stepbar-arrow-size: #{convert.to-rem(21px)},
+  --stepbar-item-background: var(--color-surface-contrast),
+  --stepbar-item-color: var(--color-text-inverse),
 );
 
 $arrow-spacing-small: (
@@ -26,8 +30,8 @@ $arrow-spacing-small: (
 
 $arrow-spacing: (
   default: (
-    padding-left: convert.to-rem(40px),
-    padding-right: convert.to-rem(19px),
+    padding-left: convert.to-rem(35px),
+    padding-right: convert.to-rem(30px),
   ),
   first: (
     padding-left: convert.to-rem(35px),
@@ -40,43 +44,56 @@ $arrow-spacing: (
 $arrows: (
   default: (
     done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23141414'/%3E%3C/svg%3E"),
     current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
     next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='white'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23dddddd'/%3E%3C/svg%3E"),
   ),
   inverse: (
     done:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='white'/%3E%3C/svg%3E"),
     current:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23F16E00'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23f15e00'/%3E%3C/svg%3E"),
     next:
-      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0L16 20L0 40V0Z' fill='%23eee'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg width='21' height='40' viewBox='0 0 21 40' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V40H5L21 20L5 0Z' fill='%23141414'/%3E%3Cpath d='M0 0L16 20L0 40V0Z' fill='%23595959'/%3E%3C/svg%3E"),
   ),
 );
 
 $item-done-colors: (
   default: (
-    background: var(--color-surface-contrast),
+    --stepbar-item-background: var(--color-surface-contrast),
+    --stepbar-item-color: var(--color-text-inverse),
+  ),
+  inverse: (
+    --stepbar-item-background: var(--color-surface-contrast),
+    --stepbar-item-color: var(--color-text-inverse),
   ),
 );
 
 $item-colors: (
   current: (
-    background: var(--color-surface-tertiary),
-    color: var(--color-text-default),
+    --stepbar-item-background: var(--color-surface-tertiary),
+    --stepbar-item-color: #{color.$white},
   ),
   next: (
-    background: var(--color-surface-subtle),
-    color: var(--color-surface-contrast),
+    --stepbar-item-background: var(--color-surface-moderate),
+    --stepbar-item-color: var(--color-text-default),
   ),
 );
 
 $link-colors: (
   default: (
     base: (
-      color: var(--color-text-inverse),
+      color: var(--stepbar-item-color),
+    ),
+    interaction: (
+      color: var(--color-text-accent),
+    ),
+  ),
+  inverse: (
+    base: (
+      color: var(--stepbar-item-color),
     ),
     interaction: (
       color: var(--color-text-accent),

package/src/components/Stepbar/styles/mixins.scss

@@ -4,7 +4,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/map";
 @use "../../../styles/tokens/breakpoint";
-@use "../../../styles/typography/mixins" as typoMixins;
+@use "../../../styles/typography/config" as typographyConfig;
 @use "./config";
 
 @mixin list-base {
@@ -14,6 +14,7 @@
   padding-left: 0;
   margin: 0 0 space.get("large") 0;
   max-width: none;
+  @include generate.css-map(sass-map.get(typographyConfig.$caption, "large"));
   font-weight: bold;
 }
 
@@ -65,10 +66,11 @@
     position: absolute;
     z-index: 1;
     top: 0;
-    right: -21px;
-    width: 21px;
+    right: calc(var(--stepbar-arrow-size) * -1);
+    width: var(--stepbar-arrow-size);
     height: 100%;
     background-size: 100% 100%;
+    pointer-events: none;
   }
 }
 

package/src/components/Tabs/Tabs.static.ts

@@ -13,12 +13,19 @@ export const configDocs = {
 };
 
 export default class Tabs {
+  private static readonly SCROLL_ALIGNMENT_TOLERANCE = 1;
+  private static readonly SCROLL_EDGE_TOLERANCE = 1;
+
   private element: HTMLElement;
   private config: TabsConfig;
   private tabs: HTMLElement[];
   private tabPanels: (HTMLElement | null)[];
   private activeTabIndex: number | null;
   private rovingTabindex: RovingTabindex | null;
+  private resizeObserver: ResizeObserver | null;
+  private horizontalScrollHandler: () => void;
+  private resizeHandler: () => void;
+  private viewportElement: HTMLElement | null;
 
   constructor(element: HTMLElement, config?: Partial<TabsConfig>) {
     this.element = element;
@@ -29,9 +36,14 @@ export default class Tabs {
     this.activeTabIndex = null;
 
     this.rovingTabindex = null;
+    this.resizeObserver = null;
+    this.viewportElement = null;
 
     this.handleClick = this.handleClick.bind(this);
     this.handleTabFocus = this.handleTabFocus.bind(this);
+    this.horizontalScrollHandler =
+      this.updateHorizontalOverflowState.bind(this);
+    this.resizeHandler = this.updateHorizontalOverflowState.bind(this);
 
     (this.element as any).ODS_Tabs = this;
 
@@ -73,13 +85,17 @@ export default class Tabs {
     }
 
     if (this.activeTabIndex !== null) {
-      this.toggleTabPanel(this.tabPanels[this.activeTabIndex], "on");
+      this.setActiveTab(this.activeTabIndex);
     } else if (this.tabs.length > 0) {
       this.activateNthTab(0);
     }
+
+    this.setupOverflowObserver();
   }
 
   destroy(): void {
+    this.teardownOverflowObserver();
+
     this.tabs.map((tab) => {
       tab.removeEventListener("click", this.handleClick);
       tab.removeEventListener("focus", this.handleTabFocus);
@@ -94,6 +110,66 @@ export default class Tabs {
     (this.element as any).ODS_Tabs = null;
   }
 
+  private setupOverflowObserver(): void {
+    this.teardownOverflowObserver();
+
+    this.viewportElement = this.element.parentElement?.classList.contains(
+      "tab-list__viewport",
+    )
+      ? this.element.parentElement
+      : null;
+
+    this.element.addEventListener("scroll", this.horizontalScrollHandler, {
+      passive: true,
+    });
+    window.addEventListener("resize", this.resizeHandler);
+
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(this.resizeHandler);
+      this.resizeObserver.observe(this.element);
+      this.tabs.forEach((tab) => this.resizeObserver?.observe(tab));
+    }
+
+    this.updateHorizontalOverflowState();
+  }
+
+  private teardownOverflowObserver(): void {
+    this.element.removeEventListener("scroll", this.horizontalScrollHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.viewportElement) {
+      this.viewportElement.classList.remove(
+        "has-left-overflow",
+        "has-right-overflow",
+      );
+      this.viewportElement = null;
+    }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private updateHorizontalOverflowState(): void {
+    if (!this.viewportElement) return;
+
+    const maxScrollLeft = this.element.scrollWidth - this.element.clientWidth;
+    const hasOverflow = maxScrollLeft > Tabs.SCROLL_EDGE_TOLERANCE;
+    const atStart = this.element.scrollLeft <= Tabs.SCROLL_EDGE_TOLERANCE;
+    const atEnd =
+      this.element.scrollLeft >= maxScrollLeft - Tabs.SCROLL_EDGE_TOLERANCE;
+
+    this.viewportElement.classList.toggle(
+      "has-left-overflow",
+      hasOverflow && !atStart,
+    );
+    this.viewportElement.classList.toggle(
+      "has-right-overflow",
+      hasOverflow && !atEnd,
+    );
+  }
+
   update(): void {
     this.destroy();
     this.init();
@@ -105,31 +181,80 @@ export default class Tabs {
   private isSelected = (el: HTMLElement): boolean =>
     el.getAttribute("aria-selected") === "true";
 
-  private handleClick(e: MouseEvent): void {
-    const clickedTab = e.currentTarget as HTMLElement;
-
-    if (clickedTab.hasAttribute("aria-disabled")) {
-      e.preventDefault();
-      return;
-    }
-
+  private setActiveTab(index: number, forceCenter: boolean = false): void {
     this.tabs.map((tab, i) => {
-      if (tab === clickedTab) {
+      if (i === index) {
         this.activeTabIndex = i;
         return this.toggleTab(tab, "on");
       }
       return this.toggleTab(tab, "off");
     });
 
-    this.tabPanels.map((tabPanel) => {
-      if (
-        tabPanel &&
-        tabPanel.getAttribute("id") === clickedTab.getAttribute("aria-controls")
-      ) {
+    this.tabPanels.map((tabPanel, i) => {
+      if (i === index) {
         return this.toggleTabPanel(tabPanel, "on");
       }
       return this.toggleTabPanel(tabPanel, "off");
     });
+
+    const activeTab = this.tabs[index];
+    if (activeTab) {
+      this.scrollTabIntoView(activeTab, forceCenter);
+    }
+  }
+
+  private scrollTabIntoView(
+    activeTab: HTMLElement,
+    forceCenter: boolean = false,
+  ): void {
+    const maxScrollLeft = Math.max(
+      0,
+      this.element.scrollWidth - this.element.clientWidth,
+    );
+    const contentRect = this.element.getBoundingClientRect();
+    const itemRect = activeTab.getBoundingClientRect();
+    const itemCenterWithinContent =
+      itemRect.left -
+      contentRect.left +
+      this.element.scrollLeft +
+      itemRect.width / 2;
+    const targetScrollLeft =
+      itemCenterWithinContent - this.element.clientWidth / 2;
+    const behavior = window.innerWidth < 768 ? "auto" : "smooth";
+    const nextScrollLeft = Math.min(
+      maxScrollLeft,
+      Math.max(0, targetScrollLeft),
+    );
+
+    const isAlreadyAligned =
+      Math.abs(this.element.scrollLeft - nextScrollLeft) <=
+      Tabs.SCROLL_ALIGNMENT_TOLERANCE;
+    if (!forceCenter && isAlreadyAligned) return;
+
+    if (typeof this.element.scrollTo === "function") {
+      this.element.scrollTo({
+        left: nextScrollLeft,
+        behavior,
+      });
+      return;
+    }
+
+    this.element.scrollLeft = nextScrollLeft;
+    this.updateHorizontalOverflowState();
+  }
+
+  private handleClick(e: MouseEvent): void {
+    const clickedTab = e.currentTarget as HTMLElement;
+
+    if (clickedTab.hasAttribute("aria-disabled")) {
+      e.preventDefault();
+      return;
+    }
+
+    const clickedIndex = this.tabs.findIndex((tab) => tab === clickedTab);
+    if (clickedIndex >= 0) {
+      this.setActiveTab(clickedIndex, true);
+    }
   }
 
   private toggleTab(el: HTMLElement, state: "on" | "off"): void {
@@ -161,25 +286,27 @@ export default class Tabs {
   }
 
   activateNthTab(index: number): void {
-    this.tabs.map((tab, i) => {
-      if (i === index) {
-        this.activeTabIndex = i;
-        return this.toggleTab(tab, "on");
-      }
-      return this.toggleTab(tab, "off");
-    });
-
-    this.tabPanels.map((tabPanel, i) => {
-      if (i === index) {
-        return this.toggleTabPanel(tabPanel, "on");
-      }
-      return this.toggleTabPanel(tabPanel, "off");
-    });
+    this.setActiveTab(index, true);
   }
 
-  private handleTabFocus(): void {
+  private handleTabFocus(event: FocusEvent): void {
     if (this.rovingTabindex && !this.rovingTabindex.isActive) {
       this.rovingTabindex.init();
     }
+
+    const focusedTab = event.currentTarget as HTMLElement | null;
+    if (focusedTab && this.shouldCenterFocusedTab(focusedTab)) {
+      this.scrollTabIntoView(focusedTab);
+    }
+  }
+
+  private shouldCenterFocusedTab(focusedTab: HTMLElement): boolean {
+    if (typeof focusedTab.matches !== "function") return true;
+
+    try {
+      return focusedTab.matches(":focus-visible");
+    } catch {
+      return true;
+    }
   }
 }