@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/table/tableFooterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableFooterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tfoot\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableFooterClassNameOptions {\n  className?: string;\n  sticky?: boolean;\n  stickyActive?: boolean;\n  stickyActiveClassName?: string;\n}\n\nexport function tableFooter(options: TableFooterClassNameOptions = {}): string {\n  const { className, sticky, stickyActive, stickyActiveClassName } = options;\n\n  return cnb(\n    styles({\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    stickyActive && stickyActiveClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableFooter","options","className","sticky","stickyActive","stickyActiveClassName"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,YAAY,EAAEC,qBAAqB,EAAE,GAAGJ;IAEnE,OAAOJ,IACLE,OAAO;QACLI;QACA,iBAAiBC;IACnB,IACAA,gBAAgBC,uBAChBH;AAEJ"}

package/dist/table/tableHeaderStyles.d.ts

@@ -0,0 +1,10 @@
+/** @remarks \@since 6.0.0 */
+export interface TableHeaderClassNameOptions {
+    className?: string;
+    dense?: boolean;
+    sticky?: boolean;
+    stickyActive?: boolean;
+    stickyActiveClassName?: string;
+}
+/** @remarks \@since 6.0.0 */
+export declare function tableHeader(options?: TableHeaderClassNameOptions): string;

package/dist/table/tableHeaderStyles.js

@@ -0,0 +1,13 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-thead");
+/** @remarks \@since 6.0.0 */ export function tableHeader(options = {}) {
+    const { dense, sticky, stickyActive, stickyActiveClassName, className } = options;
+    return cnb(styles({
+        dense,
+        sticky,
+        "sticky-active": stickyActive
+    }), stickyActive && stickyActiveClassName, className);
+}
+
+//# sourceMappingURL=tableHeaderStyles.js.map

package/dist/table/tableHeaderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableHeaderStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-thead\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableHeaderClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  sticky?: boolean;\n  stickyActive?: boolean;\n  stickyActiveClassName?: string;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableHeader(options: TableHeaderClassNameOptions = {}): string {\n  const { dense, sticky, stickyActive, stickyActiveClassName, className } =\n    options;\n\n  return cnb(\n    styles({\n      dense,\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    stickyActive && stickyActiveClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableHeader","options","dense","sticky","stickyActive","stickyActiveClassName","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB,2BAA2B,GAC3B,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,YAAY,EAAEC,qBAAqB,EAAEC,SAAS,EAAE,GACrEL;IAEF,OAAOJ,IACLE,OAAO;QACLG;QACAC;QACA,iBAAiBC;IACnB,IACAA,gBAAgBC,uBAChBC;AAEJ"}

package/dist/table/tableRowStyles.d.ts

@@ -0,0 +1,10 @@
+/** @remarks \@since 6.0.0 */
+export interface TableRowClassNameOptions {
+    className?: string;
+    disableHover?: boolean;
+    disableBorders?: boolean;
+    selected?: boolean;
+    clickable?: boolean;
+}
+/** @remarks \@since 6.0.0 */
+export declare function tableRow(options?: TableRowClassNameOptions): string;

package/dist/table/tableRowStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-tr");
+/** @remarks \@since 6.0.0 */ export function tableRow(options = {}) {
+    const { disableHover, disableBorders, selected, clickable, className } = options;
+    return cnb(styles({
+        bordered: !disableBorders,
+        hoverable: !disableHover,
+        clickable,
+        selected
+    }), className);
+}
+
+//# sourceMappingURL=tableRowStyles.js.map

package/dist/table/tableRowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableRowStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tr\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableRowClassNameOptions {\n  className?: string;\n  disableHover?: boolean;\n  disableBorders?: boolean;\n  selected?: boolean;\n  clickable?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableRow(options: TableRowClassNameOptions = {}): string {\n  const { disableHover, disableBorders, selected, clickable, className } =\n    options;\n  return cnb(\n    styles({\n      bordered: !disableBorders,\n      hoverable: !disableHover,\n      clickable,\n      selected,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableRow","options","disableHover","disableBorders","selected","clickable","className","bordered","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB,2BAA2B,GAC3B,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GACpEL;IACF,OAAOJ,IACLE,OAAO;QACLQ,UAAU,CAACJ;QACXK,WAAW,CAACN;QACZG;QACAD;IACF,IACAE;AAEJ"}

package/dist/table/tableStyles.d.ts

@@ -0,0 +1,12 @@
+/** @remarks \@since 6.0.0 */
+export interface TableClassNameOptions {
+    className?: string;
+    /** @defaultValue `false` */
+    dense?: boolean;
+    /** @defaultValue `false` */
+    fullWidth?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function table(options?: TableClassNameOptions): string;

package/dist/table/tableStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-table");
+/**
+ * @remarks \@since 6.0.0
+ */ export function table(options = {}) {
+    const { dense = false, fullWidth = false, className } = options;
+    return cnb(styles({
+        dense,
+        "full-width": fullWidth
+    }), className);
+}
+
+//# sourceMappingURL=tableStyles.js.map

package/dist/table/tableStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-table\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function table(options: TableClassNameOptions = {}): string {\n  const { dense = false, fullWidth = false, className } = options;\n\n  return cnb(styles({ dense, \"full-width\": fullWidth }), className);\n}\n"],"names":["cnb","bem","styles","table","options","dense","fullWidth","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAExD,OAAOJ,IAAIE,OAAO;QAAEG;QAAO,cAAcC;IAAU,IAAIC;AACzD"}

package/dist/table/types.d.ts

@@ -1,6 +1,25 @@
 import type { IntersectionObserverHookOptions } from "../useIntersectionObserver.js";
 /** @remarks \@since 6.0.0 */
 export type TableStickySectionOptions = Pick<IntersectionObserverHookOptions<HTMLTableSectionElement>, "disabled" | "getThreshold" | "getRootMargin">;
+/**
+ * This **should be wrapped in `useCallback`** to increase performance.
+ *
+ * The default behavior is to enable the "active" state for sticky headers is:
+ *
+ * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
+ *   after the `<thead>` and enable the active state once 1px overlaps with
+ *   the container.
+ * - otherwise, assume the `TableHeader` is fixed within the viewport and
+ *   parse the `top` CSS style as `px`. enable the active state once 1px
+ *   overlaps with this value AND the `TableHeader` exists within the
+ *   viewport.
+ *   - Note: This really only works with `px` and `rem` units.
+ *
+ * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and
+ * margin.
+ * @remarks \@since 6.0.0
+ */
+export type IsStickyTableSectionActive = (entry: IntersectionObserverEntry, isInTableContainer: boolean) => boolean;
 /** @remarks \@since 6.0.0 */
 export interface TableStickySectionProps {
     /**
@@ -43,25 +62,19 @@ export interface TableStickySectionProps {
      */
     stickyOptions?: TableStickySectionOptions;
     /**
-     * This **should be wrapped in `useCallback`** to increase performance.
-     *
-     * The default behavior is to enable the "active" state for sticky headers is:
-     *
-     * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
-     *   after the `<thead>` and enable the active state once 1px overlaps with
-     *   the container.
-     * - otherwise, assume the `TableHeader` is fixed within the viewport and
-     *   parse the `top` CSS style as `px`. enable the active state once 1px
-     *   overlaps with this value AND the `TableHeader` exists within the
-     *   viewport.
-     *   - Note: This really only works with `px` and `rem` units.
-     *
-     *
+     * An optional className to use when the sticky section is covering other rows
+     * (`active`). When this is defined, the default
+     * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be
+     * applied.
+     */
+    stickyActiveClassName?: string;
+    /**
+     * @see {@link IsStickyTableSectionActive} for a description.
      * @see {@link stickyOptions} for an example usage with custom threshold and
      * margin.
      * @remarks \@since 6.0.0
      */
-    isStickyActive?(entry: IntersectionObserverEntry): boolean;
+    isStickyActive?: IsStickyTableSectionActive;
     /**
      * Set this to `true` when the {@link sticky} prop is `true` to disable the
      * behavior of adding an additional className when the sticky mode is active.

package/dist/table/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/types.ts"],"sourcesContent":["import type { IntersectionObserverHookOptions } from \"../useIntersectionObserver.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TableStickySectionOptions = Pick<\n  IntersectionObserverHookOptions<HTMLTableSectionElement>,\n  \"disabled\" | \"getThreshold\" | \"getRootMargin\"\n>;\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableStickySectionProps {\n  /**\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n\n  /**\n   * This can be used when the {@link sticky} prop is set to `true` for\n   * additional behavior around the \"active\" state for sticky headers.\n   *\n   * @example\n   * Disabling Sticky Active State\n   * ```ts\n   * stickyOptions={{\n   *   disabled: true,\n   * }}\n   * ```\n   *\n   * @example\n   * Custom Options\n   * ```ts\n   * stickyOptions={{\n   *   getThreshold: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return [0, 0.25, 0.5, 1];\n   *   }, []),\n   *   getRootMargin: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return \"-1px 0px 150px 0px\";\n   *   }, []),\n   * }}\n   * isStickyActive={useCallback((entry) => {\n   *   // whatever custom logic you want. you can access the DOM safely from here\n   *   return entry.isIntersecting;\n   * }, [])}\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API}\n   */\n  stickyOptions?: TableStickySectionOptions;\n\n  /**\n   * This **should be wrapped in `useCallback`** to increase performance.\n   *\n   * The default behavior is to enable the \"active\" state for sticky headers is:\n   *\n   * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`\n   *   after the `<thead>` and enable the active state once 1px overlaps with\n   *   the container.\n   * - otherwise, assume the `TableHeader` is fixed within the viewport and\n   *   parse the `top` CSS style as `px`. enable the active state once 1px\n   *   overlaps with this value AND the `TableHeader` exists within the\n   *   viewport.\n   *   - Note: This really only works with `px` and `rem` units.\n   *\n   *\n   * @see {@link stickyOptions} for an example usage with custom threshold and\n   * margin.\n   * @remarks \\@since 6.0.0\n   */\n  isStickyActive?(entry: IntersectionObserverEntry): boolean;\n\n  /**\n   * Set this to `true` when the {@link sticky} prop is `true` to disable the\n   * behavior of adding an additional className when the sticky mode is active.\n   *\n   * The `TableHeader` would gain the `.rmd-thead--sticky-active` class while\n   * the `TableFooter` would gain the `.rmd-tfoot--sticky-active` class.\n   *\n   * @defaultValue `false`\n   */\n  disableStickyStyles?: boolean;\n}\n"],"names":[],"mappings":"AAQA,2BAA2B,GAC3B,WAyEC"}
+{"version":3,"sources":["../../src/table/types.ts"],"sourcesContent":["import type { IntersectionObserverHookOptions } from \"../useIntersectionObserver.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TableStickySectionOptions = Pick<\n  IntersectionObserverHookOptions<HTMLTableSectionElement>,\n  \"disabled\" | \"getThreshold\" | \"getRootMargin\"\n>;\n\n/**\n * This **should be wrapped in `useCallback`** to increase performance.\n *\n * The default behavior is to enable the \"active\" state for sticky headers is:\n *\n * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`\n *   after the `<thead>` and enable the active state once 1px overlaps with\n *   the container.\n * - otherwise, assume the `TableHeader` is fixed within the viewport and\n *   parse the `top` CSS style as `px`. enable the active state once 1px\n *   overlaps with this value AND the `TableHeader` exists within the\n *   viewport.\n *   - Note: This really only works with `px` and `rem` units.\n *\n * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and\n * margin.\n * @remarks \\@since 6.0.0\n */\nexport type IsStickyTableSectionActive = (\n  entry: IntersectionObserverEntry,\n  isInTableContainer: boolean\n) => boolean;\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableStickySectionProps {\n  /**\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n\n  /**\n   * This can be used when the {@link sticky} prop is set to `true` for\n   * additional behavior around the \"active\" state for sticky headers.\n   *\n   * @example\n   * Disabling Sticky Active State\n   * ```ts\n   * stickyOptions={{\n   *   disabled: true,\n   * }}\n   * ```\n   *\n   * @example\n   * Custom Options\n   * ```ts\n   * stickyOptions={{\n   *   getThreshold: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return [0, 0.25, 0.5, 1];\n   *   }, []),\n   *   getRootMargin: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return \"-1px 0px 150px 0px\";\n   *   }, []),\n   * }}\n   * isStickyActive={useCallback((entry) => {\n   *   // whatever custom logic you want. you can access the DOM safely from here\n   *   return entry.isIntersecting;\n   * }, [])}\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API}\n   */\n  stickyOptions?: TableStickySectionOptions;\n\n  /**\n   * An optional className to use when the sticky section is covering other rows\n   * (`active`). When this is defined, the default\n   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be\n   * applied.\n   */\n  stickyActiveClassName?: string;\n\n  /**\n   * @see {@link IsStickyTableSectionActive} for a description.\n   * @see {@link stickyOptions} for an example usage with custom threshold and\n   * margin.\n   * @remarks \\@since 6.0.0\n   */\n  isStickyActive?: IsStickyTableSectionActive;\n\n  /**\n   * Set this to `true` when the {@link sticky} prop is `true` to disable the\n   * behavior of adding an additional className when the sticky mode is active.\n   *\n   * The `TableHeader` would gain the `.rmd-thead--sticky-active` class while\n   * the `TableFooter` would gain the `.rmd-tfoot--sticky-active` class.\n   *\n   * @defaultValue `false`\n   */\n  disableStickyStyles?: boolean;\n}\n"],"names":[],"mappings":"AA+BA,2BAA2B,GAC3B,WAoEC"}

package/dist/tabs/Tab.d.ts

@@ -1,8 +1,9 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type CustomLinkComponent } from "../link/Link.js";
 /**
  * @remarks \@since 6.0.0
  */
-export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface BaseTabProps {
     /**
      * Set this to `true` if the tab is currently active.
      *
@@ -17,6 +18,13 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * @defaultValue `false`
      */
     activeIndicator?: boolean;
+    /**
+     * Set this to `true` when rendering the tabs vertically and
+     * {@link activeIndicator} has been enabled.
+     *
+     * @defaultValue !false
+     */
+    verticalActiveIndicator?: boolean;
     /**
      * An optional icon to render with the with the {@link children}. The default
      * behavior will render this icon before the children.
@@ -39,6 +47,19 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     stacked?: boolean;
 }
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TabButtonProps extends BaseTabProps, ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: "button";
+}
+export interface TabLinkProps extends BaseTabProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+    as: CustomLinkComponent;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TabProps = TabButtonProps | TabLinkProps;
 /**
  * **Client Component**
  *
@@ -49,4 +70,4 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *
  * @remarks \@since 6.0.0
  */
-export declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Tab(props: TabProps): ReactElement;

package/dist/tabs/Tab.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
@@ -15,8 +14,8 @@ import { tab } from "./tabStyles.js";
  * @see {@link useTabs}
  *
  * @remarks \@since 6.0.0
- */ export const Tab = /*#__PURE__*/ forwardRef(function Tab(props, ref) {
-    const { id: propId, active, activeIndicator, icon, iconAfter, stacked, className, children: propChildren, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, ...remaining } = props;
+ */ export function Tab(props) {
+    const { id: propId, as: Component = "button", active, activeIndicator, verticalActiveIndicator, icon, iconAfter, stacked, className, children: propChildren, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, ...remaining } = props;
     const { disabled } = props;
     const id = useEnsuredId(propId, "tab");
     const { activeDescendantId } = useKeyboardMovementContext();
@@ -34,23 +33,31 @@ import { tab } from "./tabStyles.js";
         onTouchMove,
         disabled
     });
+    const isLink = Component !== "button";
     const children = useHigherContrastChildren(propChildren);
-    return /*#__PURE__*/ _jsxs("button", {
+    let buttonOnlyProps;
+    if (!isLink) {
+        buttonOnlyProps = {
+            type: "button"
+        };
+    }
+    return /*#__PURE__*/ _jsxs(Component, {
         ...remaining,
+        ...buttonOnlyProps,
         ...handlers,
         "aria-selected": active,
         id: id,
-        ref: ref,
         role: "tab",
-        type: "button",
         tabIndex: id === activeDescendantId ? 0 : -1,
         className: tab({
             className,
             active,
+            isLink,
             stacked: !!icon && stacked,
             disabled,
             reversed: !!icon && iconAfter,
-            activeIndicator
+            activeIndicator,
+            verticalActiveIndicator
         }),
         children: [
             icon,
@@ -58,6 +65,6 @@ import { tab } from "./tabStyles.js";
             ripples
         ]
     });
-});
+}
 
 //# sourceMappingURL=Tab.js.map

package/dist/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.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 * @remarks \\@since 6.0.0\n */\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\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   * 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 * **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 * @remarks \\@since 6.0.0\n */\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(\n  function Tab(props, ref) {\n    const {\n      id: propId,\n      active,\n      activeIndicator,\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      ...remaining\n    } = props;\n    const { disabled } = props;\n\n    const id = useEnsuredId(propId, \"tab\");\n    const { activeDescendantId } = useKeyboardMovementContext();\n    const { ripples, handlers } = useElementInteraction({\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 children = useHigherContrastChildren(propChildren);\n\n    return (\n      <button\n        {...remaining}\n        {...handlers}\n        aria-selected={active}\n        id={id}\n        ref={ref}\n        role=\"tab\"\n        type=\"button\"\n        tabIndex={id === activeDescendantId ? 0 : -1}\n        className={tab({\n          className,\n          active,\n          stacked: !!icon && stacked,\n          disabled,\n          reversed: !!icon && iconAfter,\n          activeIndicator,\n        })}\n      >\n        {icon}\n        {children}\n        {ripples}\n      </button>\n    );\n  }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","ref","id","propId","active","activeIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","remaining","disabled","activeDescendantId","ripples","handlers","button","aria-selected","role","type","tabIndex","reversed"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAmD,QAAQ;AAC9E,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,iBAAiB;AAoDrC;;;;;;;;;CASC,GACD,OAAO,MAAMC,oBAAMN,WACjB,SAASM,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,IAAIC,MAAM,EACVC,MAAM,EACNC,eAAe,EACfC,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,EACX,GAAGC,WACJ,GAAGvB;IACJ,MAAM,EAAEwB,QAAQ,EAAE,GAAGxB;IAErB,MAAME,KAAKL,aAAaM,QAAQ;IAChC,MAAM,EAAEsB,kBAAkB,EAAE,GAAG7B;IAC/B,MAAM,EAAE8B,OAAO,EAAEC,QAAQ,EAAE,GAAGjC,sBAAsB;QAClDkB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMd,WAAWf,0BAA0BgB;IAE3C,qBACE,MAACiB;QACE,GAAGL,SAAS;QACZ,GAAGI,QAAQ;QACZE,iBAAezB;QACfF,IAAIA;QACJD,KAAKA;QACL6B,MAAK;QACLC,MAAK;QACLC,UAAU9B,OAAOuB,qBAAqB,IAAI,CAAC;QAC3ChB,WAAWX,IAAI;YACbW;YACAL;YACAI,SAAS,CAAC,CAACF,QAAQE;YACnBgB;YACAS,UAAU,CAAC,CAAC3B,QAAQC;YACpBF;QACF;;YAECC;YACAI;YACAgB;;;AAGP,GACA"}
+{"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 { 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 * @remarks \\@since 6.0.0\n */\nexport interface BaseTabProps {\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 * @remarks \\@since 6.0.0\n */\nexport interface TabButtonProps\n  extends BaseTabProps,\n    ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: \"button\";\n}\n\nexport interface TabLinkProps\n  extends BaseTabProps,\n    AnchorHTMLAttributes<HTMLAnchorElement> {\n  as: CustomLinkComponent;\n}\n\n/**\n * @remarks \\@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 * @remarks \\@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    ...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    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","remaining","disabled","activeDescendantId","ripples","handlers","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAOA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,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,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM,EAAE0B,QAAQ,EAAE,GAAG1B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAEyB,kBAAkB,EAAE,GAAG/B;IAC/B,MAAM,EAAEgC,OAAO,EAAEC,QAAQ,EAAE,GAAGnC,sBAAsB;QAClDoB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMI,SAAS1B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIkB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC5B;QACE,GAAGqB,SAAS;QACZ,GAAGM,eAAe;QAClB,GAAGF,QAAQ;QACZI,iBAAe5B;QACfJ,IAAIA;QACJiC,MAAK;QACLC,UAAUlC,OAAO0B,qBAAqB,IAAI,CAAC;QAC3ChB,WAAWb,IAAI;YACba;YACAN;YACAyB;YACApB,SAAS,CAAC,CAACF,QAAQE;YACnBgB;YACAU,UAAU,CAAC,CAAC5B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAgB;;;AAGP"}

package/dist/tabs/_tabs.scss

@@ -13,11 +13,12 @@ $disable-stacked: false !default;
 $disable-reversed: false !default;
 $disable-tablist-padded: false !default;
 $disable-tablist-vertical: false !default;
-$disable-indicator: false !default;
 $disable-tablist-indicator: false !default;
 $disable-tablist-hidden-scrollbar: false !default;
 $disable-tablist-scroll-button: false !default;
 $disable-tablist-active-indicator-transition: false !default;
+$disable-indicator: false !default;
+$disable-indicator-vertical: false !default;
 
 $typography: map.remove(typography.$button-styles, line-height) !default;
 $gap: icon.$spacing !default;
@@ -41,46 +42,29 @@ $tablist-scroller-background-color: theme.theme-get-var(
   background-color,
   inherit
 ) !default;
-
-$var-lookup: (
-  color: (
-    var: --rmd-tab-color,
-    value: $inactive-color,
-  ),
-  active-color: (
-    var: --rmd-tab-active-color,
-    value: $active-color,
-  ),
-  inactive-color: (
-    var: --rmd-tab-inactive-color,
-    value: $inactive-color,
-  ),
-  disabled-color: (
-    var: --rmd-tab-disabled-color,
-    value: $disabled-color,
-  ),
-  indicator-background: (
-    var: --rmd-tab-indicator-background,
-    value: $indicator-background,
-  ),
+$tablist-vertical-indicator-left: 0 !default;
+
+$variables: (
+  color,
+  active-color,
+  inactive-color,
+  disabled-color,
+  indicator-background
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tabs var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tab");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tabs var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -92,21 +76,41 @@ $var-lookup: (
     &::after {
       @include use-var(background, indicator-background);
 
-      bottom: 0;
       content: "";
-      height: $indicator-height;
       pointer-events: none;
       position: absolute;
-      width: 100%;
       z-index: 1;
     }
 
+    &--h::after {
+      bottom: 0;
+      height: $indicator-height;
+      width: 100%;
+    }
+
+    @if not $disable-indicator-vertical {
+      &--v::after {
+        @include utils.auto-rtl(left, $tablist-vertical-indicator-left);
+
+        height: 100%;
+        top: 0;
+        width: $indicator-height;
+      }
+    }
+
     @if not $disable-tablist-indicator {
-      &--tablist::after {
+      &--tablist-h::after {
         left: 0;
-        max-width: var(--rmd-tab-width, $min-width);
+        max-width: var(--rmd-tab-size, $min-width);
         transform: translateX(var(--rmd-tab-offset, 0));
       }
+
+      @if not $disable-tablist-vertical {
+        &--tablist-v::after {
+          max-height: var(--rmd-tab-size, $min-width);
+          transform: translateY(var(--rmd-tab-offset, 0));
+        }
+      }
     }
 
     @if not $disable-tablist-active-indicator-transition {
@@ -126,6 +130,8 @@ $var-lookup: (
     // also fixes issues when placed within a flex column container
     flex-shrink: 0;
     flex-wrap: nowrap;
+    // make sure it can enable scrollbars in flex/grid containers
+    max-width: 100%;
     outline: none;
     overflow-x: auto;
     position: relative;
@@ -144,16 +150,6 @@ $var-lookup: (
     @if not $disable-tablist-vertical {
       &--vertical {
         flex-direction: column;
-
-        @if not $disable-tablist-indicator {
-          &::after {
-            bottom: auto;
-            left: auto;
-            right: 0;
-            top: 0;
-            transform: translateY(var(--rmd-tab-offset, 0));
-          }
-        }
       }
     }
 
@@ -246,17 +242,32 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include tablist-styles;
-    @include tab-styles;
+    @include set-var(color, $inactive-color);
+    @include set-var(active-color, $active-color);
+    @include set-var(inactive-color, $inactive-color);
+    @include set-var(disabled-color, $disabled-color);
 
     @if not $disable-indicator {
-      @include indicator-styles;
+      @include set-var(indicator-background, $indicator-background);
     }
+  }
+}
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(tabs, $disable-layer) {
+      @include tablist-styles;
+      @include tab-styles;
+
+      @if not $disable-indicator {
+        @include indicator-styles;
+      }
 
-    @if not $disable-tablist-scroll-button {
-      @include tablist-button-styles;
+      @if not $disable-tablist-scroll-button {
+        @include tablist-button-styles;
+      }
     }
   }
 }

package/dist/tabs/tabIndicatorStyles.d.ts

@@ -3,8 +3,9 @@
  */
 export interface TabIndicatorClassNameOptions {
     className?: string;
-    tablist?: boolean;
     animate?: boolean;
+    tablist?: boolean;
+    vertical?: boolean;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/tabs/tabIndicatorStyles.js

@@ -4,10 +4,13 @@ const styles = bem("rmd-tab-indicator");
 /**
  * @remarks \@since 6.0.0
  */ export function tabIndicator(options = {}) {
-    const { className, tablist, animate } = options;
+    const { className, vertical, tablist, animate } = options;
     return cnb(styles({
-        tablist,
-        animate
+        animate,
+        h: !vertical,
+        v: vertical,
+        "tablist-h": tablist && !vertical,
+        "tablist-v": tablist && vertical
     }), className);
 }
 

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 * @remarks \\@since 6.0.0\n */\nexport interface TabIndicatorClassNameOptions {\n  className?: string;\n  tablist?: boolean;\n  animate?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tabIndicator(\n  options: TabIndicatorClassNameOptions = {}\n): string {\n  const { className, tablist, animate } = options;\n\n  return cnb(styles({ tablist, animate }), className);\n}\n"],"names":["cnb","bem","styles","tabIndicator","options","className","tablist","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAExC,OAAOJ,IAAIE,OAAO;QAAEI;QAASC;IAAQ,IAAIF;AAC3C"}
+{"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 * @remarks \\@since 6.0.0\n */\nexport interface TabIndicatorClassNameOptions {\n  className?: string;\n  animate?: boolean;\n  tablist?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @remarks \\@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"}

package/dist/tabs/tabListStyles.js

@@ -14,7 +14,8 @@ const styles = bem("rmd-tablist");
         "no-scrollbar": !scrollbar
     }), indicator && tabIndicator({
         tablist: true,
-        animate
+        animate,
+        vertical
     }), className);
 }
 

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 * @remarks \\@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 * @remarks \\@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 }),\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;IAAQ,IACnDN;AAEJ"}
+{"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 * @remarks \\@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 * @remarks \\@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"}

package/dist/tabs/tabStyles.d.ts

@@ -12,7 +12,9 @@ declare module "react" {
 export interface TabClassNameOptions {
     className?: string;
     active?: boolean;
+    isLink?: boolean;
     activeIndicator?: boolean;
+    verticalActiveIndicator?: boolean;
     stacked?: boolean;
     reversed?: boolean;
     disabled?: boolean;

package/dist/tabs/tabStyles.js

@@ -6,15 +6,18 @@ const styles = bem("rmd-tab");
 /**
  * @remarks \@since 6.0.0
  */ export function tab(options = {}) {
-    const { className, active, activeIndicator, stacked, reversed, disabled } = options;
+    const { className, active, isLink, stacked, reversed, disabled, activeIndicator, verticalActiveIndicator } = options;
     return cnb(styles({
         active,
         reversed: reversed && !stacked,
         stacked,
         "stacked-reversed": stacked && reversed,
         disabled
-    }), active && activeIndicator && tabIndicator(), cssUtils({
-        surface: true
+    }), active && activeIndicator && tabIndicator({
+        vertical: verticalActiveIndicator
+    }), cssUtils({
+        surface: true,
+        textDecoration: isLink ? "none" : undefined
     }), className);
 }
 

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}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  activeIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const { className, active, activeIndicator, stacked, reversed, disabled } =\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 && activeIndicator && tabIndicator(),\n    cssUtils({ surface: true }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","activeIndicator","stacked","reversed","disabled","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAWvD,MAAMC,SAASF,IAAI;AAcnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GACvEN;IAEF,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UAAUC,mBAAmBN,gBAC7BF,SAAS;QAAEY,SAAS;IAAK,IACzBN;AAEJ"}
+{"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}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @remarks \\@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 * @remarks \\@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;AAWvD,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"}