@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/dist/table/useTableSectionConfig.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/useTableSectionConfig.ts"],"sourcesContent":["\"use client\";\nimport { useMemo } from \"react\";\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport {\n  type TableConfigContext,\n  type TableSectionConfiguration,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TableSectionConfigOptions extends TableSectionConfiguration {\n  type: \"header\" | \"footer\";\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTableSectionConfig(\n  options: TableSectionConfigOptions\n): Readonly<TableConfigContext> {\n  const { type, lineWrap: propLineWrap, hoverable } = options;\n\n  // update the table configuration with the custom overrides for the `<thead>/<tfoot>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  return useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: type === \"header\",\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, type, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n}\n"],"names":["useMemo","useTableConfig","useTableSectionConfig","options","type","lineWrap","propLineWrap","hoverable","dense","hAlign","vAlign","disableHover","disableBorders","header"],"mappings":"AAAA;AACA,SAASA,OAAO,QAAQ,QAAQ;AAChC,SAASC,cAAc,QAAQ,kCAAkC;AAcjE;;;CAGC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,IAAI,EAAEC,UAAUC,YAAY,EAAEC,SAAS,EAAE,GAAGJ;IAEpD,qFAAqF;IACrF,MAAM,EAAEK,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEL,QAAQ,EAAEM,YAAY,EAAEC,cAAc,EAAE,GACrEX,eAAe;QACbI,UAAUC;QACVK,cAAc,CAACJ;IACjB;IAEF,OAAOP,QACL,IAAO,CAAA;YACLQ;YACAK,QAAQT,SAAS;YACjBK;YACAC;YACAL;YACAO;YACAD;QACF,CAAA,GACA;QAACH;QAAOJ;QAAMK;QAAQC;QAAQL;QAAUO;QAAgBD;KAAa;AAEzE"}
+{"version":3,"sources":["../../src/table/useTableSectionConfig.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport {\n  type TableConfigContext,\n  type TableSectionConfiguration,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TableSectionConfigOptions extends TableSectionConfiguration {\n  type: \"header\" | \"footer\";\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport function useTableSectionConfig(\n  options: TableSectionConfigOptions\n): Readonly<TableConfigContext> {\n  const { type, lineWrap: propLineWrap, hoverable } = options;\n\n  // update the table configuration with the custom overrides for the `<thead>/<tfoot>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  return useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: type === \"header\",\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, type, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n}\n"],"names":["useMemo","useTableConfig","useTableSectionConfig","options","type","lineWrap","propLineWrap","hoverable","dense","hAlign","vAlign","disableHover","disableBorders","header"],"mappings":"AAAA;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,cAAc,QAAQ,kCAAkC;AAcjE;;;CAGC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,IAAI,EAAEC,UAAUC,YAAY,EAAEC,SAAS,EAAE,GAAGJ;IAEpD,qFAAqF;IACrF,MAAM,EAAEK,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEL,QAAQ,EAAEM,YAAY,EAAEC,cAAc,EAAE,GACrEX,eAAe;QACbI,UAAUC;QACVK,cAAc,CAACJ;IACjB;IAEF,OAAOP,QACL,IAAO,CAAA;YACLQ;YACAK,QAAQT,SAAS;YACjBK;YACAC;YACAL;YACAO;YACAD;QACF,CAAA,GACA;QAACH;QAAOJ;QAAMK;QAAQC;QAAQL;QAAUO;QAAgBD;KAAa;AAEzE"}

package/dist/tabs/SimpleTabPanel.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ProvidedTabPanelProps } from "./useTabs.js";
+/**
+ * @since 6.0.0
+ */
+export interface SimpleTabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>, ProvidedTabPanelProps {
+    children: ReactNode;
+}
+/**
+ * This component can be a replacement for the `Slide` component when animations
+ * are not required for changing the active tab contents.
+ *
+ * This should generally be used along with the `SimpleTabPanels` component.
+ *
+ * @since 6.0.0
+ */
+export declare const SimpleTabPanel: import("react").ForwardRefExoticComponent<SimpleTabPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tabs/SimpleTabPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
+/**
+ * This component can be a replacement for the `Slide` component when animations
+ * are not required for changing the active tab contents.
+ *
+ * This should generally be used along with the `SimpleTabPanels` component.
+ *
+ * @since 6.0.0
+ */ export const SimpleTabPanel = /*#__PURE__*/ forwardRef(function SimpleTabPanel(props, ref) {
+    const { active, className, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        ...remaining,
+        className: cnb(!active && DISPLAY_NONE_CLASS, className)
+    });
+});
+
+//# sourceMappingURL=SimpleTabPanel.js.map

package/dist/tabs/SimpleTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/SimpleTabPanel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type ProvidedTabPanelProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,\n    ProvidedTabPanelProps {\n  children: ReactNode;\n}\n\n/**\n * This component can be a replacement for the `Slide` component when animations\n * are not required for changing the active tab contents.\n *\n * This should generally be used along with the `SimpleTabPanels` component.\n *\n * @since 6.0.0\n */\nexport const SimpleTabPanel = forwardRef<HTMLDivElement, SimpleTabPanelProps>(\n  function SimpleTabPanel(props, ref) {\n    const { active, className, ...remaining } = props;\n    return (\n      <div\n        ref={ref}\n        {...remaining}\n        className={cnb(!active && DISPLAY_NONE_CLASS, className)}\n      />\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DISPLAY_NONE_CLASS","SimpleTabPanel","props","ref","active","className","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,kBAAkB,QAAQ,+BAA+B;AAYlE;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC5C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWP,IAAI,CAACM,UAAUJ,oBAAoBK;;AAGpD,GACA"}

package/dist/tabs/SimpleTabPanels.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ProvidedTabPanelsProps } from "./useTabs.js";
+/**
+ * @since 6.0.0
+ */
+export interface SimpleTabPanelsProps extends HTMLAttributes<HTMLDivElement>, Omit<ProvidedTabPanelsProps<HTMLDivElement>, "ref"> {
+    children: ReactNode;
+}
+/**
+ * This component can be used as a replacement for the `SlideContainer` when
+ * animations are not required for changing the active tab contents.
+ *
+ * This should be normally be used along with the `SimpleTabPanel` component.
+ *
+ * @since 6.0.0
+ */
+export declare const SimpleTabPanels: import("react").ForwardRefExoticComponent<SimpleTabPanelsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tabs/SimpleTabPanels.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+/**
+ * This component can be used as a replacement for the `SlideContainer` when
+ * animations are not required for changing the active tab contents.
+ *
+ * This should be normally be used along with the `SimpleTabPanel` component.
+ *
+ * @since 6.0.0
+ */ export const SimpleTabPanels = /*#__PURE__*/ forwardRef(function SimpleTabPanels(props, ref) {
+    const { direction: _direction, ...remaining } = props;
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        ...remaining
+    });
+});
+
+//# sourceMappingURL=SimpleTabPanels.js.map

package/dist/tabs/SimpleTabPanels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/SimpleTabPanels.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type ProvidedTabPanelsProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelsProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Omit<ProvidedTabPanelsProps<HTMLDivElement>, \"ref\"> {\n  children: ReactNode;\n}\n\n/**\n * This component can be used as a replacement for the `SlideContainer` when\n * animations are not required for changing the active tab contents.\n *\n * This should be normally be used along with the `SimpleTabPanel` component.\n *\n * @since 6.0.0\n */\nexport const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(\n  function SimpleTabPanels(props, ref) {\n    const { direction: _direction, ...remaining } = props;\n\n    return <div ref={ref} {...remaining} />;\n  }\n);\n"],"names":["forwardRef","SimpleTabPanels","props","ref","direction","_direction","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAaxE;;;;;;;CAOC,GACD,OAAO,MAAMC,gCAAkBD,WAC7B,SAASC,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EAAEC,WAAWC,UAAU,EAAE,GAAGC,WAAW,GAAGJ;IAEhD,qBAAO,KAACK;QAAIJ,KAAKA;QAAM,GAAGG,SAAS;;AACrC,GACA"}

package/dist/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { tab } from \"./tabStyles.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps extends ComponentWithRippleProps {\n  /**\n   * Set this to `true` if the tab is currently active.\n   *\n   * This is normally provided by the {@link useTabs} hook.\n   */\n  active: boolean;\n\n  /**\n   * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n   * also been set to `true` to disable an active indicator below the tab when\n   * {@link active} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  activeIndicator?: boolean;\n\n  /**\n   * Set this to `true` when rendering the tabs vertically and\n   * {@link activeIndicator} has been enabled.\n   *\n   * @defaultValue !false\n   */\n  verticalActiveIndicator?: boolean;\n\n  /**\n   * An optional icon to render with the with the {@link children}. The default\n   * behavior will render this icon before the children.\n   *\n   * @see {@link iconAfter}\n   * @see {@link stacked}\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this to `true` to render the {@link icon} after the {@link children}.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` to render the {@link icon} and {@link children} stacked\n   * instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabButtonProps\n  extends BaseTabProps,\n    ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: \"button\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabLinkProps\n  extends BaseTabProps,\n    AnchorHTMLAttributes<HTMLAnchorElement> {\n  as: CustomLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link useTabs}\n *\n * @since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n  const {\n    id: propId,\n    as: Component = \"button\",\n    active,\n    activeIndicator,\n    verticalActiveIndicator,\n    icon,\n    iconAfter,\n    stacked,\n    className,\n    children: propChildren,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disableRipple,\n    ...remaining\n  } = props as TabButtonProps;\n  const { disabled } = props as TabButtonProps;\n\n  const id = useEnsuredId(propId, \"tab\");\n  const { activeDescendantId } = useKeyboardMovementContext();\n  const { ripples, handlers } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  const isLink = Component !== \"button\";\n  const children = useHigherContrastChildren(propChildren);\n  let buttonOnlyProps: Record<string, unknown> | undefined;\n  if (!isLink) {\n    buttonOnlyProps = { type: \"button\" };\n  }\n\n  return (\n    <Component\n      {...remaining}\n      {...buttonOnlyProps}\n      {...handlers}\n      aria-selected={active}\n      id={id}\n      role=\"tab\"\n      tabIndex={id === activeDescendantId ? 0 : -1}\n      className={tab({\n        className,\n        active,\n        isLink,\n        stacked: !!icon && stacked,\n        disabled,\n        reversed: !!icon && iconAfter,\n        activeIndicator,\n        verticalActiveIndicator,\n      })}\n    >\n      {icon}\n      {children}\n      {ripples}\n    </Component>\n  );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","disabled","activeDescendantId","ripples","handlers","mode","undefined","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAQA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,iBAAiB;AAmFrC;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM,EAAE2B,QAAQ,EAAE,GAAG3B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAE0B,kBAAkB,EAAE,GAAGhC;IAC/B,MAAM,EAAEiC,OAAO,EAAEC,QAAQ,EAAE,GAAGpC,sBAAsB;QAClDqC,MAAMN,gBAAgB,SAASO;QAC/BlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;IACF;IAEA,MAAMM,SAAS7B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIqB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC/B;QACE,GAAGsB,SAAS;QACZ,GAAGQ,eAAe;QAClB,GAAGJ,QAAQ;QACZM,iBAAe/B;QACfJ,IAAIA;QACJoC,MAAK;QACLC,UAAUrC,OAAO2B,qBAAqB,IAAI,CAAC;QAC3CjB,WAAWb,IAAI;YACba;YACAN;YACA4B;YACAvB,SAAS,CAAC,CAACF,QAAQE;YACnBiB;YACAY,UAAU,CAAC,CAAC/B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAiB;;;AAGP"}
+{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\nimport { tab } from \"./tabStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps extends ComponentWithRippleProps {\n  /**\n   * Set this to `true` if the tab is currently active.\n   *\n   * This is normally provided by the {@link useTabs} hook.\n   */\n  active: boolean;\n\n  /**\n   * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n   * also been set to `true` to disable an active indicator below the tab when\n   * {@link active} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  activeIndicator?: boolean;\n\n  /**\n   * Set this to `true` when rendering the tabs vertically and\n   * {@link activeIndicator} has been enabled.\n   *\n   * @defaultValue !false\n   */\n  verticalActiveIndicator?: boolean;\n\n  /**\n   * An optional icon to render with the with the {@link children}. The default\n   * behavior will render this icon before the children.\n   *\n   * @see {@link iconAfter}\n   * @see {@link stacked}\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this to `true` to render the {@link icon} after the {@link children}.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` to render the {@link icon} and {@link children} stacked\n   * instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabButtonProps\n  extends BaseTabProps,\n    ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: \"button\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabLinkProps\n  extends BaseTabProps,\n    AnchorHTMLAttributes<HTMLAnchorElement> {\n  as: CustomLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link useTabs}\n *\n * @since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n  const {\n    id: propId,\n    as: Component = \"button\",\n    active,\n    activeIndicator,\n    verticalActiveIndicator,\n    icon,\n    iconAfter,\n    stacked,\n    className,\n    children: propChildren,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disableRipple,\n    ...remaining\n  } = props as TabButtonProps;\n  const { disabled } = props as TabButtonProps;\n\n  const id = useEnsuredId(propId, \"tab\");\n  const { activeDescendantId } = useKeyboardMovementContext();\n  const { ripples, handlers } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  const isLink = Component !== \"button\";\n  const children = useHigherContrastChildren(propChildren);\n  let buttonOnlyProps: Record<string, unknown> | undefined;\n  if (!isLink) {\n    buttonOnlyProps = { type: \"button\" };\n  }\n\n  return (\n    <Component\n      {...remaining}\n      {...buttonOnlyProps}\n      {...handlers}\n      aria-selected={active}\n      id={id}\n      role=\"tab\"\n      tabIndex={id === activeDescendantId ? 0 : -1}\n      className={tab({\n        className,\n        active,\n        isLink,\n        stacked: !!icon && stacked,\n        disabled,\n        reversed: !!icon && iconAfter,\n        activeIndicator,\n        verticalActiveIndicator,\n      })}\n    >\n      {icon}\n      {children}\n      {ripples}\n    </Component>\n  );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","disabled","activeDescendantId","ripples","handlers","mode","undefined","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAUA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAGlD,SAASC,GAAG,QAAQ,iBAAiB;AAgFrC;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM,EAAE2B,QAAQ,EAAE,GAAG3B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAE0B,kBAAkB,EAAE,GAAGhC;IAC/B,MAAM,EAAEiC,OAAO,EAAEC,QAAQ,EAAE,GAAGpC,sBAAsB;QAClDqC,MAAMN,gBAAgB,SAASO;QAC/BlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;IACF;IAEA,MAAMM,SAAS7B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIqB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC/B;QACE,GAAGsB,SAAS;QACZ,GAAGQ,eAAe;QAClB,GAAGJ,QAAQ;QACZM,iBAAe/B;QACfJ,IAAIA;QACJoC,MAAK;QACLC,UAAUrC,OAAO2B,qBAAqB,IAAI,CAAC;QAC3CjB,WAAWb,IAAI;YACba;YACAN;YACA4B;YACAvB,SAAS,CAAC,CAACF,QAAQE;YACnBiB;YACAY,UAAU,CAAC,CAAC/B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAiB;;;AAGP"}

package/dist/tabs/TabList.d.ts

@@ -1,29 +1,14 @@
 import { type HTMLAttributes } from "react";
-import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 import { type BaseTabListScrollButtonProps } from "./TabListScrollButton.js";
-import { type TabsAlignment } from "./tabListStyles.js";
+import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
+import { type TabListClassNameOptions } from "./tabListStyles.js";
+import { type TabListActivationMode, type TabListScrollButtonsBehavior } from "./types.js";
 /**
  * @since 6.0.0
  */
-export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabListProps extends HTMLAttributes<HTMLDivElement>, Omit<TabListClassNameOptions, "animate" | "indicator"> {
     activeIndex: number;
     setActiveIndex: (nextActiveIndex: number) => void;
-    /**
-     * @defaultValue `"left"`
-     */
-    align?: TabsAlignment;
-    /**
-     * @defaultValue `false`
-     */
-    padded?: boolean;
-    /**
-     * @defaultValue `false`
-     */
-    vertical?: boolean;
-    /**
-     * @defaultValue `false`
-     */
-    inline?: boolean;
     /**
      * Set this to `true` to show a scrollbar when the number of tabs cause
      * overflow.
@@ -47,16 +32,14 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
     transitionDuration?: number;
     /**
      * @defaultValue `"manual"`
+     * @see {@link TabListActivationMode}
      */
-    activationMode?: "manual" | "automatic";
+    activationMode?: TabListActivationMode;
     /**
-     * Set this to `true` to render buttons that can scroll forwards or backwards
-     * within the tab list if there is overflow **on desktop**. If you want to
-     * display the scroll buttons on mobile as well, set this to `"allow-phone"` .
-     *
      * @defaultValue `false`
+     * @see {@link TabListScrollButtonsBehavior}
      */
-    scrollButtons?: boolean | "allow-phone";
+    scrollButtons?: TabListScrollButtonsBehavior;
     /**
      * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}
      * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.

package/dist/tabs/TabList.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
-import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { TabListScrollButton } from "./TabListScrollButton.js";
 import { tabList } from "./tabListStyles.js";
@@ -13,10 +12,8 @@ import { useTabList } from "./useTabList.js";
  *
  * @since 6.0.0
  */ export const TabList = /*#__PURE__*/ forwardRef(function TabList(props, ref) {
-    const { style, onClick, onFocus, onKeyDown, className, children, activeIndex, setActiveIndex, activationMode = "manual", align = "left", padded = false, inline = false, vertical = false, scrollbar = false, scrollButtons = false, disableTransition = false, transitionDuration = 150, getScrollToOptions, forwardScrollButtonProps, backwardScrollButtonProps, ...remaining } = props;
-    const { isPhone } = useAppSize();
-    const showScrollButtons = !!scrollButtons && (scrollButtons === "allow-phone" || !isPhone);
-    const { elementProps, movementContext, backwardProps, forwardProps } = useTabList({
+    const { style, onClick, onFocus, onKeyDown, className, children, activeIndex, setActiveIndex, activationMode = "manual", align = "left", padded = false, inline = false, vertical = false, scrollbar = false, scrollButtons = false, fullWidthTabs, disableTransition = false, transitionDuration = 150, getScrollToOptions, forwardScrollButtonProps, backwardScrollButtonProps, ...remaining } = props;
+    const { elementProps, movementContext, backwardProps, forwardProps, showScrollButtons } = useTabList({
         ref,
         style,
         onClick,
@@ -26,7 +23,7 @@ import { useTabList } from "./useTabList.js";
         activeIndex,
         setActiveIndex,
         activationMode,
-        scrollButtons: showScrollButtons,
+        scrollButtons,
         disableTransition
     });
     const prevActiveIndex = useRef(activeIndex);
@@ -63,6 +60,7 @@ import { useTabList } from "./useTabList.js";
                 vertical,
                 scrollbar,
                 indicator: !disableTransition,
+                fullWidthTabs,
                 className
             }),
             children: [

package/dist/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { type GetTabListScrollToOptions } from \"./getTabListScrollToOptions.js\";\nimport {\n  TabListScrollButton,\n  type BaseTabListScrollButtonProps,\n} from \"./TabListScrollButton.js\";\nimport { tabList, type TabsAlignment } from \"./tabListStyles.js\";\nimport { useTabList } from \"./useTabList.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n\n  /**\n   * @defaultValue `\"left\"`\n   */\n  align?: TabsAlignment;\n\n  /**\n   * @defaultValue `false`\n   */\n  padded?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   */\n  activationMode?: \"manual\" | \"automatic\";\n\n  /**\n   * Set this to `true` to render buttons that can scroll forwards or backwards\n   * within the tab list if there is overflow **on desktop**. If you want to\n   * display the scroll buttons on mobile as well, set this to `\"allow-phone\"` .\n   *\n   * @defaultValue `false`\n   */\n  scrollButtons?: boolean | \"allow-phone\";\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link useTabs} for example usage.\n *\n * @since 6.0.0\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    const {\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      className,\n      children,\n      activeIndex,\n      setActiveIndex,\n      activationMode = \"manual\",\n      align = \"left\",\n      padded = false,\n      inline = false,\n      vertical = false,\n      scrollbar = false,\n      scrollButtons = false,\n      disableTransition = false,\n      transitionDuration = 150,\n      getScrollToOptions,\n      forwardScrollButtonProps,\n      backwardScrollButtonProps,\n      ...remaining\n    } = props;\n\n    const { isPhone } = useAppSize();\n    const showScrollButtons =\n      !!scrollButtons && (scrollButtons === \"allow-phone\" || !isPhone);\n\n    const { elementProps, movementContext, backwardProps, forwardProps } =\n      useTabList({\n        ref,\n        style,\n        onClick,\n        onFocus,\n        onKeyDown,\n        vertical,\n        activeIndex,\n        setActiveIndex,\n        activationMode,\n        scrollButtons: showScrollButtons,\n        disableTransition,\n      });\n\n    const prevActiveIndex = useRef(activeIndex);\n    const [animate, setAnimate] = useState(false);\n    useEffect(() => {\n      const isSameIndex = activeIndex === prevActiveIndex.current;\n      prevActiveIndex.current = activeIndex;\n      if (disableTransition || isSameIndex) {\n        return;\n      }\n\n      setAnimate(true);\n      const timeout = window.setTimeout(() => {\n        setAnimate(false);\n      }, transitionDuration);\n\n      return () => {\n        window.clearTimeout(timeout);\n      };\n    }, [activeIndex, disableTransition, transitionDuration]);\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div\n          {...remaining}\n          {...elementProps}\n          role=\"tablist\"\n          className={tabList({\n            align,\n            padded,\n            inline,\n            animate: !disableTransition && animate,\n            vertical,\n            scrollbar,\n            indicator: !disableTransition,\n            className,\n          })}\n        >\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...backwardScrollButtonProps}\n              {...backwardProps}\n            />\n          )}\n          {children}\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...forwardScrollButtonProps}\n              {...forwardProps}\n            />\n          )}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useRef","useState","useAppSize","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","isPhone","showScrollButtons","elementProps","movementContext","backwardProps","forwardProps","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","window","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,UAAU,QAAQ,sCAAsC;AACjE,SAASC,wBAAwB,QAAQ,6CAA6C;AAEtF,SACEC,mBAAmB,QAEd,2BAA2B;AAClC,SAASC,OAAO,QAA4B,qBAAqB;AACjE,SAASC,UAAU,QAAQ,kBAAkB;AAiH7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUT,WACrB,SAASS,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAM,EAAEuB,OAAO,EAAE,GAAG7B;IACpB,MAAM8B,oBACJ,CAAC,CAACR,iBAAkBA,CAAAA,kBAAkB,iBAAiB,CAACO,OAAM;IAEhE,MAAM,EAAEE,YAAY,EAAEC,eAAe,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAClE9B,WAAW;QACTG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM,eAAeQ;QACfP;IACF;IAEF,MAAMY,kBAAkBrC,OAAOgB;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGtC,SAAS;IACvCF,UAAU;QACR,MAAMyC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIS,qBAAqBe,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,OAAOC,UAAU,CAAC;YAChCL,WAAW;QACb,GAAGb;QAEH,OAAO;YACLiB,OAAOE,YAAY,CAACH;QACtB;IACF,GAAG;QAAC1B;QAAaS;QAAmBC;KAAmB;IAEvD,qBACE,KAACvB;QAAyB2C,OAAOZ;kBAC/B,cAAA,MAACa;YACE,GAAGjB,SAAS;YACZ,GAAGG,YAAY;YAChBe,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACb,qBAAqBa;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACxB;gBACZX;YACF;;gBAECkB,mCACC,KAAC5B;oBACCuB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGM,aAAa;;gBAGpBpB;gBACAiB,mCACC,KAAC5B;oBACCuB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGQ,YAAY;;;;;AAM5B,GACA"}
+{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type BaseTabListScrollButtonProps,\n  TabListScrollButton,\n} from \"./TabListScrollButton.js\";\nimport { type GetTabListScrollToOptions } from \"./getTabListScrollToOptions.js\";\nimport { type TabListClassNameOptions, tabList } from \"./tabListStyles.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { useTabList } from \"./useTabList.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Omit<TabListClassNameOptions, \"animate\" | \"indicator\"> {\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   * @see {@link TabListActivationMode}\n   */\n  activationMode?: TabListActivationMode;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link TabListScrollButtonsBehavior}\n   */\n  scrollButtons?: TabListScrollButtonsBehavior;\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link useTabs} for example usage.\n *\n * @since 6.0.0\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    const {\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      className,\n      children,\n      activeIndex,\n      setActiveIndex,\n      activationMode = \"manual\",\n      align = \"left\",\n      padded = false,\n      inline = false,\n      vertical = false,\n      scrollbar = false,\n      scrollButtons = false,\n      fullWidthTabs,\n      disableTransition = false,\n      transitionDuration = 150,\n      getScrollToOptions,\n      forwardScrollButtonProps,\n      backwardScrollButtonProps,\n      ...remaining\n    } = props;\n\n    const {\n      elementProps,\n      movementContext,\n      backwardProps,\n      forwardProps,\n      showScrollButtons,\n    } = useTabList({\n      ref,\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      vertical,\n      activeIndex,\n      setActiveIndex,\n      activationMode,\n      scrollButtons,\n      disableTransition,\n    });\n\n    const prevActiveIndex = useRef(activeIndex);\n    const [animate, setAnimate] = useState(false);\n    useEffect(() => {\n      const isSameIndex = activeIndex === prevActiveIndex.current;\n      prevActiveIndex.current = activeIndex;\n      if (disableTransition || isSameIndex) {\n        return;\n      }\n\n      setAnimate(true);\n      const timeout = window.setTimeout(() => {\n        setAnimate(false);\n      }, transitionDuration);\n\n      return () => {\n        window.clearTimeout(timeout);\n      };\n    }, [activeIndex, disableTransition, transitionDuration]);\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div\n          {...remaining}\n          {...elementProps}\n          role=\"tablist\"\n          className={tabList({\n            align,\n            padded,\n            inline,\n            animate: !disableTransition && animate,\n            vertical,\n            scrollbar,\n            indicator: !disableTransition,\n            fullWidthTabs,\n            className,\n          })}\n        >\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...backwardScrollButtonProps}\n              {...backwardProps}\n            />\n          )}\n          {children}\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...forwardScrollButtonProps}\n              {...forwardProps}\n            />\n          )}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useRef","useState","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","fullWidthTabs","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","elementProps","movementContext","backwardProps","forwardProps","showScrollButtons","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","window","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAEEC,mBAAmB,QACd,2BAA2B;AAElC,SAAuCC,OAAO,QAAQ,qBAAqB;AAK3E,SAASC,UAAU,QAAQ,kBAAkB;AA4F7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,aAAa,EACbC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGvB;IAEJ,MAAM,EACJwB,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAG9B,WAAW;QACbG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM;QACAE;IACF;IAEA,MAAMW,kBAAkBpC,OAAOe;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGrC,SAAS;IACvCF,UAAU;QACR,MAAMwC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIU,qBAAqBc,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,OAAOC,UAAU,CAAC;YAChCL,WAAW;QACb,GAAGZ;QAEH,OAAO;YACLgB,OAAOE,YAAY,CAACH;QACtB;IACF,GAAG;QAAC1B;QAAaU;QAAmBC;KAAmB;IAEvD,qBACE,KAACxB;QAAyB2C,OAAOb;kBAC/B,cAAA,MAACc;YACE,GAAGhB,SAAS;YACZ,GAAGC,YAAY;YAChBgB,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACZ,qBAAqBY;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACvB;gBACZD;gBACAX;YACF;;gBAECsB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGI,aAAa;;gBAGpBnB;gBACAqB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGM,YAAY;;;;;AAM5B,GACA"}

package/dist/tabs/TabListScrollButton.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { Button } from "../button/Button.js";
-import { getIcon } from "../icon/iconConfig.js";
+import { getIcon } from "../icon/config.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
 import { applyRef } from "../utils/applyRef.js";
@@ -24,6 +24,7 @@ import { tabListScrollButton, tabListScrollButtonContainer } from "./tabListScro
     const [disabled, setDisabled] = useState(!forward);
     const nodeRef = useIntersectionObserver({
         root,
+        rootMargin: "1px",
         onUpdate: useCallback(([entry])=>{
             setDisabled(entry.intersectionRatio === 1);
         }, [])

package/dist/tabs/TabListScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  getTabListScrollToOptions,\n  type GetTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACEC,yBAAyB,QAEpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,UAAUrC,YAAY,CAAC,CAACsC,MAAM;YAC5BH,YAAYG,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACV,yBAAW,KAACW;gBAAK3B,KAAKuB;;0BACxB,KAACK;gBACE,GAAGb,SAAS;gBACbf,KAAK,CAAC6B;oBACJnC,SAASmC,UAAU7B;oBACnBmB,KAAKW,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA7B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC0C,cAAY/B,aAAcgB,CAAAA,aAAab,OAAO6B,SAAQ;oBACtD5B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAqB,SAAS,CAACC;wBACRhC,aAAa+B,UAAUC;wBACvB,MAAMC,YAAYjB,KAAKW,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChBzB,mBAAmB;4BACjBQ;4BACAkB,SAAS,CAACxB;4BACVD;4BACAuB;4BACAG,WAAWvB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACW;gBAAK3B,KAAKuB;;;;AAG7B,GAAG"}
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B,GAAG"}

package/dist/tabs/_tabs.scss

@@ -6,6 +6,7 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 @use "../icon/icon";
+@use "../button/button";
 
 $disable-everything: false !default;
 $disable-icon: false !default;
@@ -43,14 +44,22 @@ $tablist-scroller-background-color: theme.theme-get-var(
   background-color,
   inherit
 ) !default;
-$tablist-vertical-indicator-left: 0 !default;
+$tablist-vertical-indicator-position: 0 !default;
+$tablist-button-border-radius: 0 !default;
 
 $variables: (
   color,
   active-color,
   inactive-color,
   disabled-color,
-  indicator-background
+  indicator-background,
+  min-height,
+  max-width,
+  min-width,
+  stacked-height,
+  stacked-width,
+  padding,
+  stacked-padding
 );
 
 @function get-var($name, $fallback: null) {
@@ -92,13 +101,13 @@ $variables: (
     @if not $disable-indicator-vertical {
       &--v::after {
         height: 100%;
-        left: $tablist-vertical-indicator-left;
+        right: $tablist-vertical-indicator-position;
         top: 0;
         width: $indicator-height;
 
         @include utils.rtl {
-          left: auto;
-          right: $tablist-vertical-indicator-left;
+          left: $tablist-vertical-indicator-position;
+          right: auto;
         }
       }
     }
@@ -146,6 +155,10 @@ $variables: (
       width: 100%;
     }
 
+    &--full-width-tabs {
+      @include set-var(min-width, none);
+    }
+
     @if not $disable-tablist-hidden-scrollbar {
       &--no-scrollbar {
         @include utils.hide-scrollbar;
@@ -177,6 +190,8 @@ $variables: (
 
 @mixin tablist-button-styles {
   .rmd-tablist-button {
+    @include button.set-var(icon-border-radius, $tablist-button-border-radius);
+
     align-items: center;
     background-color: $tablist-scroller-background-color;
     display: inline-flex;
@@ -207,12 +222,23 @@ $variables: (
     &__button {
       @if not $disable-tablist-scroll-button-vertical {
         &--v {
-          transform: rotate(90deg);
+          width: 100%;
+
+          :where(.rmd-icon) {
+            transform: rotate(90deg);
+          }
         }
       }
     }
 
     @include utils.rtl {
+      $button-selector: "&__button" +
+        if(
+          $disable-tablist-scroll-button-vertical,
+          "",
+          ":where(:not(.rmd-tablist-button__button--v))"
+        );
+
       &--left {
         left: auto;
         right: 0;
@@ -223,7 +249,7 @@ $variables: (
         right: auto;
       }
 
-      &__button {
+      #{$button-selector} {
         transform: rotate(180deg);
       }
     }
@@ -234,6 +260,10 @@ $variables: (
   .rmd-tab {
     @include utils.map-to-styles($typography);
     @include use-var(color);
+    @include use-var(min-height);
+    @include use-var(max-width);
+    @include use-var(min-width);
+    @include use-var(padding);
     @if not $disable-icon {
       @include icon.set-var(color, currentcolor);
     }
@@ -242,20 +272,17 @@ $variables: (
     background-color: transparent;
     border-width: 0;
     display: inline-flex;
-    flex: 1 1 auto;
+    flex: 1 0 auto;
     gap: $gap;
     justify-content: center;
-    max-width: $max-width;
-    min-height: $height;
-    min-width: $min-width;
-    padding: 0 $horizontal-padding;
     transition: color $transition-duration $transition-timing-function;
 
     @if not $disable-stacked {
       &--stacked {
+        @include use-var(height, stacked-height);
+        @include use-var(padding, stacked-padding);
+
         flex-direction: column;
-        height: $stacked-height;
-        padding: $vertical-padding $horizontal-padding;
       }
 
       @if not $disable-reversed {
@@ -287,6 +314,15 @@ $variables: (
     @include set-var(active-color, $active-color);
     @include set-var(inactive-color, $inactive-color);
     @include set-var(disabled-color, $disabled-color);
+    @include set-var(min-height, $height);
+    @include set-var(max-width, $max-width);
+    @include set-var(min-width, $min-width);
+    @include set-var(padding, 0 $horizontal-padding);
+
+    @if not $disable-stacked {
+      @include set-var(stacked-height, $stacked-height);
+      @include set-var(stacked-padding, $vertical-padding $horizontal-padding);
+    }
 
     @if not $disable-indicator {
       @include set-var(indicator-background, $indicator-background);

package/dist/tabs/tabIndicatorStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabIndicatorStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tab-indicator\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabIndicatorClassNameOptions {\n  className?: string;\n  animate?: boolean;\n  tablist?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabIndicator(\n  options: TabIndicatorClassNameOptions = {}\n): string {\n  const { className, vertical, tablist, animate } = options;\n\n  return cnb(\n    styles({\n      animate,\n      h: !vertical,\n      v: vertical,\n      \"tablist-h\": tablist && !vertical,\n      \"tablist-v\": tablist && vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tabIndicator","options","className","vertical","tablist","animate","h","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAElD,OAAOJ,IACLE,OAAO;QACLM;QACAC,GAAG,CAACH;QACJI,GAAGJ;QACH,aAAaC,WAAW,CAACD;QACzB,aAAaC,WAAWD;IAC1B,IACAD;AAEJ"}
+{"version":3,"sources":["../../src/tabs/tabIndicatorStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tab-indicator\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabIndicatorClassNameOptions {\n  className?: string;\n  animate?: boolean;\n  tablist?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabIndicator(\n  options: TabIndicatorClassNameOptions = {}\n): string {\n  const { className, vertical, tablist, animate } = options;\n\n  return cnb(\n    styles({\n      animate,\n      h: !vertical,\n      v: vertical,\n      \"tablist-h\": tablist && !vertical,\n      \"tablist-v\": tablist && vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tabIndicator","options","className","vertical","tablist","animate","h","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAElD,OAAOJ,IACLE,OAAO;QACLM;QACAC,GAAG,CAACH;QACJI,GAAGJ;QACH,aAAaC,WAAW,CAACD;QACzB,aAAaC,WAAWD;IAC1B,IACAD;AAEJ"}

package/dist/tabs/tabListScrollButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, vertical, className } = options;\n\n  return cnb(\n    styles({\n      left: !vertical && !forward,\n      right: !vertical && forward,\n      above: vertical && !forward,\n      below: vertical && forward,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className, vertical } = options;\n\n  return cnb(styles(\"button\", { v: vertical }), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","vertical","className","left","right","above","below","tabListScrollButton","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAEzC,OAAOJ,IACLE,OAAO;QACLM,MAAM,CAACF,YAAY,CAACD;QACpBI,OAAO,CAACH,YAAYD;QACpBK,OAAOJ,YAAY,CAACD;QACpBM,OAAOL,YAAYD;IACrB,IACAE;AAEJ;AAUA;;CAEC,GACD,OAAO,SAASK,oBACdR,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEG,SAAS,EAAED,QAAQ,EAAE,GAAGF;IAEhC,OAAOJ,IAAIE,OAAO,UAAU;QAAEW,GAAGP;IAAS,IAAIC;AAChD"}
+{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, vertical, className } = options;\n\n  return cnb(\n    styles({\n      left: !vertical && !forward,\n      right: !vertical && forward,\n      above: vertical && !forward,\n      below: vertical && forward,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className, vertical } = options;\n\n  return cnb(styles(\"button\", { v: vertical }), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","vertical","className","left","right","above","below","tabListScrollButton","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAEzC,OAAOJ,IACLE,OAAO;QACLM,MAAM,CAACF,YAAY,CAACD;QACpBI,OAAO,CAACH,YAAYD;QACpBK,OAAOJ,YAAY,CAACD;QACpBM,OAAOL,YAAYD;IACrB,IACAE;AAEJ;AAUA;;CAEC,GACD,OAAO,SAASK,oBACdR,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEG,SAAS,EAAED,QAAQ,EAAE,GAAGF;IAEhC,OAAOJ,IAAIE,OAAO,UAAU;QAAEW,GAAGP;IAAS,IAAIC;AAChD"}

package/dist/tabs/tabListStyles.d.ts

@@ -7,13 +7,22 @@ export type TabsAlignment = "left" | "center" | "right";
  */
 export interface TabListClassNameOptions {
     className?: string;
+    /** @defaultValue `"left"` */
     align?: TabsAlignment;
+    /** @defaultValue `false` */
     animate?: boolean;
+    /** @defaultValue `false` */
     inline?: boolean;
+    /** @defaultValue `false` */
     padded?: boolean;
+    /** @defaultValue `false` */
     vertical?: boolean;
+    /** @defaultValue `false` */
     scrollbar?: boolean;
+    /** @defaultValue `false` */
     indicator?: boolean;
+    /** @defaultValue `false` */
+    fullWidthTabs?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/tabs/tabListStyles.js

@@ -5,12 +5,13 @@ const styles = bem("rmd-tablist");
 /**
  * @since 6.0.0
  */ export function tabList(options = {}) {
-    const { className, align = "left", padded, inline, vertical, scrollbar, animate = false, indicator = false } = options;
+    const { className, align = "left", padded, inline, vertical, scrollbar, animate, indicator, fullWidthTabs } = options;
     return cnb(styles({
         [align]: true,
         padded,
         vertical,
         "full-width": !inline,
+        "full-width-tabs": fullWidthTabs,
         "no-scrollbar": !scrollbar
     }), indicator && tabIndicator({
         tablist: true,

package/dist/tabs/tabListStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabListStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\nconst styles = bem(\"rmd-tablist\");\n\n/**\n * The supported types of alignments for the tabs.\n */\nexport type TabsAlignment = \"left\" | \"center\" | \"right\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListClassNameOptions {\n  className?: string;\n  align?: TabsAlignment;\n  animate?: boolean;\n  inline?: boolean;\n  padded?: boolean;\n  vertical?: boolean;\n  scrollbar?: boolean;\n  indicator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabList(options: TabListClassNameOptions = {}): string {\n  const {\n    className,\n    align = \"left\",\n    padded,\n    inline,\n    vertical,\n    scrollbar,\n    animate = false,\n    indicator = false,\n  } = options;\n\n  return cnb(\n    styles({\n      [align]: true,\n      padded,\n      vertical,\n      \"full-width\": !inline,\n      \"no-scrollbar\": !scrollbar,\n    }),\n    indicator && tabIndicator({ tablist: true, animate, vertical }),\n    className\n  );\n}\n"],"names":["cnb","bem","tabIndicator","styles","tabList","options","className","align","padded","inline","vertical","scrollbar","animate","indicator","tablist"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,MAAMC,SAASF,IAAI;AAqBnB;;CAEC,GACD,OAAO,SAASG,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EACJC,SAAS,EACTC,QAAQ,MAAM,EACdC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,KAAK,EACfC,YAAY,KAAK,EAClB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACL,CAACI,MAAM,EAAE;QACTC;QACAE;QACA,cAAc,CAACD;QACf,gBAAgB,CAACE;IACnB,IACAE,aAAaX,aAAa;QAAEY,SAAS;QAAMF;QAASF;IAAS,IAC7DJ;AAEJ"}
+{"version":3,"sources":["../../src/tabs/tabListStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\nconst styles = bem(\"rmd-tablist\");\n\n/**\n * The supported types of alignments for the tabs.\n */\nexport type TabsAlignment = \"left\" | \"center\" | \"right\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"left\"` */\n  align?: TabsAlignment;\n\n  /** @defaultValue `false` */\n  animate?: boolean;\n\n  /** @defaultValue `false` */\n  inline?: boolean;\n\n  /** @defaultValue `false` */\n  padded?: boolean;\n\n  /** @defaultValue `false` */\n  vertical?: boolean;\n\n  /** @defaultValue `false` */\n  scrollbar?: boolean;\n\n  /** @defaultValue `false` */\n  indicator?: boolean;\n\n  /** @defaultValue `false` */\n  fullWidthTabs?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabList(options: TabListClassNameOptions = {}): string {\n  const {\n    className,\n    align = \"left\",\n    padded,\n    inline,\n    vertical,\n    scrollbar,\n    animate,\n    indicator,\n    fullWidthTabs,\n  } = options;\n\n  return cnb(\n    styles({\n      [align]: true,\n      padded,\n      vertical,\n      \"full-width\": !inline,\n      \"full-width-tabs\": fullWidthTabs,\n      \"no-scrollbar\": !scrollbar,\n    }),\n    indicator && tabIndicator({ tablist: true, animate, vertical }),\n    className\n  );\n}\n"],"names":["cnb","bem","tabIndicator","styles","tabList","options","className","align","padded","inline","vertical","scrollbar","animate","indicator","fullWidthTabs","tablist"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,MAAMC,SAASF,IAAI;AAsCnB;;CAEC,GACD,OAAO,SAASG,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EACJC,SAAS,EACTC,QAAQ,MAAM,EACdC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,aAAa,EACd,GAAGT;IAEJ,OAAOL,IACLG,OAAO;QACL,CAACI,MAAM,EAAE;QACTC;QACAE;QACA,cAAc,CAACD;QACf,mBAAmBK;QACnB,gBAAgB,CAACH;IACnB,IACAE,aAAaX,aAAa;QAAEa,SAAS;QAAMH;QAASF;IAAS,IAC7DJ;AAEJ"}

package/dist/tabs/tabStyles.d.ts

@@ -6,6 +6,13 @@ declare module "react" {
         "--rmd-tab-disabled-color"?: string;
         "--rmd-tab-size"?: string;
         "--rmd-tab-offset"?: string | number;
+        "--rmd-tab-min-width"?: string;
+        "--rmd-tab-max-width"?: string;
+        "--rmd-tab-min-height"?: string;
+        "--rmd-tab-stacked-height"?: string;
+        "--rmd-tab-stacked-width"?: string;
+        "--rmd-tab-padding"?: string | number;
+        "--rmd-tab-stacked-padding"?: string | number;
         "--rmd-tab-indicator-background"?: string;
     }
 }

package/dist/tabs/tabStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAevD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}
+{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-min-width\"?: string;\n    \"--rmd-tab-max-width\"?: string;\n    \"--rmd-tab-min-height\"?: string;\n    \"--rmd-tab-stacked-height\"?: string;\n    \"--rmd-tab-stacked-width\"?: string;\n    \"--rmd-tab-padding\"?: string | number;\n    \"--rmd-tab-stacked-padding\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAsBvD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}

package/dist/tabs/types.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Set this to `"automatic"` to make it so focusing tabs with a keyboard
+ * automatically selects them instead of requiring another click. Set this to
+ * `"manual"` if it should require another click before selecting the tab.
+ *
+ * @since 6.0.0
+ */
+export type TabListActivationMode = "manual" | "automatic";
+/**
+ * Set this to `true` to always render buttons that can scroll forwards or
+ * backwards (or upwards and downwards while vertical) within the tab list when
+ * there is overflow.
+ *
+ * Set this to `"tablet-or-above"` to only render the buttons when the
+ * app size is at least a tablet's width.
+ *
+ * Set this to `"auto"` to only render the buttons when there is overflow in
+ * the tab list.
+ *
+ * Set this to `"auto-tablet-or-above"` to only render the buttons when there is
+ * overflow in the tab list and the app size is at least a tablet's width
+ *
+ * @since 6.0.0
+ */
+export type TabListScrollButtonsBehavior = boolean | "tablet-or-above" | "auto" | "auto-tablet-or-above";