@eui/eds-react 22.0.0-alpha.12 → 22.0.0-alpha.14

package/eds-tabs/eds-tab-header.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsTabHeaderLabel = React.forwardRef(function EdsTabHeaderLabel({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-tab-header-label ${className}` : 'eds-tab-header-label', ...rest, children: children }));
+});
+export const EdsTabHeaderSublabel = React.forwardRef(function EdsTabHeaderSublabel({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className ? `eds-tab-header-sub-label ${className}` : 'eds-tab-header-sub-label', ...rest, children: children }));
+});
+export const EdsTabHeaderLeftContent = React.forwardRef(function EdsTabHeaderLeftContent({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className
+            ? `eds-tab-header-left-content ${className}`
+            : 'eds-tab-header-left-content', ...rest, children: children }));
+});
+export const EdsTabHeaderRightContent = React.forwardRef(function EdsTabHeaderRightContent({ children, className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: className
+            ? `eds-tab-header-right-content ${className}`
+            : 'eds-tab-header-right-content', ...rest, children: children }));
+});
+/** Extract the label, sub-label, left-content, right-content slots and default content. */
+function splitHeaderChildren(children) {
+    let left = null;
+    let label = null;
+    let subLabel = null;
+    let right = null;
+    const rest = [];
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+            if (child !== null && child !== undefined && child !== false) {
+                rest.push(child);
+            }
+            return;
+        }
+        switch (child.type) {
+            case EdsTabHeaderLeftContent:
+                left = child;
+                break;
+            case EdsTabHeaderLabel:
+                label = child;
+                break;
+            case EdsTabHeaderSublabel:
+                subLabel = child;
+                break;
+            case EdsTabHeaderRightContent:
+                right = child;
+                break;
+            default:
+                rest.push(child);
+                break;
+        }
+    });
+    return { left, label, subLabel, right, rest };
+}
+/**
+ * Renders the header wrapper markup from an `EdsTabHeader` element's children. Called by
+ * `EdsTabs` (not rendered directly), so that a bare `<EdsTabHeader>` used as a slot marker in
+ * a tab's children produces the correct `.eds-tab-header-wrapper` structure inside the tab item.
+ */
+export function renderTabHeaderContent(headerChildren) {
+    const { left, label, subLabel, right, rest } = splitHeaderChildren(headerChildren);
+    return (_jsxs("div", { className: "eds-tab-header-wrapper", children: [left, _jsxs("div", { className: "eds-tab-header-label-wrapper", children: [label, subLabel] }), rest, right] }));
+}
+export function EdsTabHeader({ children }) {
+    return renderTabHeaderContent(children);
+}
+//# sourceMappingURL=eds-tab-header.js.map

package/eds-tabs/eds-tab-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tab-header.js","sourceRoot":"","sources":["../../src/eds-tabs/eds-tab-header.tsx"],"names":[],"mappings":"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"}

package/eds-tabs/eds-tab.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+/**
+ * `EdsTab` — pure React port of the Angular `eds-tab`.
+ *
+ * A configuration marker for a single tab: it declares the tab's state (`isDisabled`,
+ * `isVisible`, `isClosable`, parity flags) and carries its `EdsTabHeader` + `EdsTabBody` slots
+ * as children. `EdsTabs` reads its `EdsTab` children (mirroring the Angular
+ * `@ContentChildren(EdsTab)`), extracting each tab's header and body to build the tablist and
+ * the active panel. `EdsTab` itself renders nothing (like the Angular `<ng-content/>` template
+ * whose content is projected via CDK portals).
+ */
+export interface EdsTabProps {
+    /**
+     * Unique identifier for the tab. Used for programmatic tab selection and tracking.
+     */
+    id?: string;
+    /**
+     * URL or route path associated with the tab. Enables deep linking for tab navigation.
+     */
+    url?: string;
+    /**
+     * Data attribute used for end-to-end testing identification.
+     * @default 'eds-tab'
+     */
+    e2eAttr?: string;
+    /**
+     * Tooltip text displayed when hovering over the tab header.
+     */
+    tooltip?: string;
+    /**
+     * Enables a close button on the tab header for dismissible tabs.
+     * @default false
+     */
+    isClosable?: boolean;
+    /**
+     * Disables the tab, preventing user interaction and selection.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Controls the visibility of the tab in the tab bar. When false, hides the tab.
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Enables automatic tab closure when the close button is clicked. When false, the close
+     * must be handled externally (the `onTabClose` callback still fires).
+     * @default false
+     */
+    isHandleCloseOnClose?: boolean;
+    /**
+     * Enables automatic tab activation when the tab is clicked. When false, activation must be
+     * handled externally (the `onTabClick` callback still fires).
+     * @default false
+     */
+    isHandleActivateTab?: boolean;
+    /**
+     * Header content — pass an `<EdsTabHeader>` (with optional `<EdsTabHeaderLabel>` /
+     * `<EdsTabHeaderSublabel>` / left/right content) and an `<EdsTabBody>` for the panel.
+     */
+    children?: React.ReactNode;
+}
+export declare function EdsTab(_props: EdsTabProps): null;
+//# sourceMappingURL=eds-tab.d.ts.map

package/eds-tabs/eds-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tab.d.ts","sourceRoot":"","sources":["../../src/eds-tabs/eds-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAGhD"}

package/eds-tabs/eds-tab.js

@@ -0,0 +1,5 @@
+export function EdsTab(_props) {
+    // Rendered by EdsTabs, not directly — this is a configuration/slot marker.
+    return null;
+}
+//# sourceMappingURL=eds-tab.js.map

package/eds-tabs/eds-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tab.js","sourceRoot":"","sources":["../../src/eds-tabs/eds-tab.tsx"],"names":[],"mappings":"AAgEA,MAAM,UAAU,MAAM,CAAC,MAAmB;IACtC,2EAA2E;IAC3E,OAAO,IAAI,CAAC;AAChB,CAAC"}

package/eds-tabs/eds-tabs-context.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Coordination API published by an `EdsTabs` container to descendants (e.g. a projected
+ * `EdsTabsRightContent`). The React analog of the Angular `EdsTabs` host instance that
+ * child components could reach via DI. Kept minimal — the tablist/panel rendering is owned
+ * entirely by `EdsTabs`, which reads its `EdsTab` children directly (mirroring the Angular
+ * `@ContentChildren(EdsTab)` + template loop).
+ */
+export interface EdsTabsContextValue {
+    /** Index of the currently active tab. */
+    activeTabIndex: number;
+    /** Activate the tab at the given index (honouring disabled/handle-activate parity flags). */
+    activate: (index: number) => void;
+    /** Close the tab at the given index (honouring the handle-close parity flag). */
+    close: (index: number, event: React.SyntheticEvent) => void;
+}
+/** Context published by `EdsTabs` for descendant coordination. */
+export declare const EdsTabsContext: import("react").Context<EdsTabsContextValue | undefined>;
+/** Hook for a descendant to consume the enclosing `EdsTabs` coordination API. */
+export declare function useEdsTabs(): EdsTabsContextValue | undefined;
+//# sourceMappingURL=eds-tabs-context.d.ts.map

package/eds-tabs/eds-tabs-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tabs-context.d.ts","sourceRoot":"","sources":["../../src/eds-tabs/eds-tabs-context.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,WAAW,mBAAmB;IAChC,yCAAyC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,6FAA6F;IAC7F,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iFAAiF;IACjF,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;CAC/D;AAED,kEAAkE;AAClE,eAAO,MAAM,cAAc,0DAA4D,CAAC;AAExF,iFAAiF;AACjF,wBAAgB,UAAU,IAAI,mBAAmB,GAAG,SAAS,CAE5D"}

package/eds-tabs/eds-tabs-context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+/** Context published by `EdsTabs` for descendant coordination. */
+export const EdsTabsContext = createContext(undefined);
+/** Hook for a descendant to consume the enclosing `EdsTabs` coordination API. */
+export function useEdsTabs() {
+    return useContext(EdsTabsContext);
+}
+//# sourceMappingURL=eds-tabs-context.js.map

package/eds-tabs/eds-tabs-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tabs-context.js","sourceRoot":"","sources":["../../src/eds-tabs/eds-tabs-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkBlD,kEAAkE;AAClE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAkC,SAAS,CAAC,CAAC;AAExF,iFAAiF;AACjF,MAAM,UAAU,UAAU;IACtB,OAAO,UAAU,CAAC,cAAc,CAAC,CAAC;AACtC,CAAC"}

package/eds-tabs/eds-tabs-right-content.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * `EdsTabsRightContent` — pure React port of the Angular `eds-tabs-right-content`.
+ *
+ * A content-projection wrapper for arbitrary content pinned to the right of the tab bar
+ * (`margin-left: auto`). Passed to `EdsTabs` via the `rightContent` prop (the React analog of
+ * the Angular `<ng-content select="eds-tabs-right-content">` slot); `EdsTabs` renders it inside
+ * the `.eds-tabs-right-content-wrapper`.
+ */
+export interface EdsTabsRightContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const EdsTabsRightContent: React.ForwardRefExoticComponent<EdsTabsRightContentProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-tabs-right-content.d.ts.map

package/eds-tabs/eds-tabs-right-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tabs-right-content.d.ts","sourceRoot":"","sources":["../../src/eds-tabs/eds-tabs-right-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;GAOG;AACH,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,iGAc/B,CAAC"}

package/eds-tabs/eds-tabs-right-content.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const EdsTabsRightContent = React.forwardRef(function EdsTabsRightContent({ children, className, ...rest }, ref) {
+    return (_jsx("div", { ref: ref, className: className ? `eds-tabs-right-content ${className}` : 'eds-tabs-right-content', ...rest, children: children }));
+});
+//# sourceMappingURL=eds-tabs-right-content.js.map

package/eds-tabs/eds-tabs-right-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tabs-right-content.js","sourceRoot":"","sources":["../../src/eds-tabs/eds-tabs-right-content.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAC/C,SAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC9D,OAAO,CACH,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EACL,SAAS,CAAC,CAAC,CAAC,0BAA0B,SAAS,EAAE,CAAC,CAAC,CAAC,wBAAwB,KAE5E,IAAI,YAEP,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CACJ,CAAC"}

package/eds-tabs/eds-tabs.css

@@ -0,0 +1,212 @@
+/*
+ * eds-tabs — pure React port of eds-tabs.scss (1:1).
+ * :host.eds-tabs -> .eds-tabs ; :host.eds-tabs--brand -> .eds-tabs.eds-tabs--brand (kept as
+ * modifier classes: the Angular source computes them via EdsColorDirective, so this follows the
+ * class-based source, Part 1 rule 9). ::ng-deep -> descendant selectors. base.eds-focus-visible
+ * and base.eds-ellipsis mixins inlined. The `.eui-21` wrapper is dropped (share-ready).
+ */
+
+/* VARS DEFS */
+.eds-tabs {
+    /* EDS tokens (not the legacy --eui-f-*, which are undefined outside the Angular app and
+       made the tab labels fall back to the browser default font). */
+    --_label-font: var(--eds-f-label-m-semi-bold);
+    --_sublabel-font: var(--eds-f-paragraph-s);
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.eds-tabs .eds-tab-item {
+    --_border-color: transparent;
+    --_color: var(--eds-c-foreground-subtler);
+    --_color-hover: var(--eds-c-foreground);
+}
+.eds-tabs .eds-tab-item--active {
+    --_color: var(--eds-c-foreground);
+    --_border-color: var(--eds-c-border);
+}
+.eds-tabs .eds-tab-item--disabled {
+    --_color: var(--eds-c-foreground-disabled);
+    --_icon-color: var(--eds-c-foreground-disabled);
+    --_border-color-hover: transparent;
+}
+
+/* COLOR VARIANTS */
+.eds-tabs.eds-tabs--brand .eds-tab-item {
+    --_color: var(--eds-c-foreground-inverted);
+    --_color-hover: var(--eds-c-on-surface-brand);
+}
+.eds-tabs.eds-tabs--brand .eds-tab-item--active {
+    --_color: var(--eds-c-on-surface-brand);
+    --_border-color: var(--eds-c-on-surface-brand);
+}
+
+.eds-tabs.eds-tabs--neutral .eds-tab-item {
+    --_color: var(--eds-c-foreground-subtler);
+    --_color-hover: var(--eds-c-foreground);
+}
+.eds-tabs.eds-tabs--neutral .eds-tab-item--active {
+    --_color: var(--eds-c-foreground);
+    --_border-color: var(--eds-c-foreground);
+}
+
+/* NAVBAR VARIANT — no bottom border on wrapper */
+.eds-tabs.eds-tabs--navbar .eds-tabs-wrapper {
+    border-bottom: none;
+}
+
+/* WRAPPER */
+.eds-tabs .eds-tabs-wrapper {
+    align-items: center;
+    border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
+    display: flex;
+    overflow: hidden;
+    position: relative;
+}
+.eds-tabs .eds-tabs-wrapper .eds-tabs-right-content-wrapper {
+    display: flex;
+    margin-left: var(--eds-sp-m);
+}
+
+/* UL items */
+.eds-tabs .eds-tab-items {
+    display: flex;
+    height: 100%;
+    list-style: none;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* LI item */
+.eds-tabs .eds-tab-items .eds-tab-item {
+    align-items: center;
+    background-color: inherit;
+    border: var(--eui-bw-none);
+    border-bottom: var(--eds-bw-s) solid transparent;
+    color: var(--_color);
+    cursor: pointer;
+    display: flex;
+    padding: var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);
+    position: relative;
+    text-align: center;
+    gap: var(--eds-sp-2xs);
+}
+/* inlined base.eds-focus-visible */
+.eds-tabs .eds-tab-items .eds-tab-item:focus-visible:not([readonly]) {
+    outline: 2px solid var(--eds-c-border-primary) !important;
+    outline-offset: -2px !important;
+    transition: none;
+}
+
+/* Main container */
+.eds-tabs .eds-tab-items .eds-tab-item .eds-tab-header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--eds-sp-s);
+    /* inlined base.eds-ellipsis */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item .eds-tab-header-wrapper .eds-tab-header-label-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item .eds-tab-header-wrapper .eds-tab-header-label-wrapper .eds-tab-header-label {
+    display: block;
+    font-weight: bold;
+    line-height: var(--eds-sp-l);
+    color: var(--_color);
+    font: var(--_label-font);
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item .eds-tab-header-wrapper .eds-tab-header-label-wrapper .eds-tab-header-sub-label {
+    font-weight: normal;
+    color: var(--_color);
+    font: var(--_sublabel-font);
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item .eds-tab-header-left-content,
+.eds-tabs .eds-tab-items .eds-tab-item .eds-tab-header-right-content {
+    display: flex;
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item--active {
+    border-color: var(--_border-color);
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item--disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) .eds-tab-header-label {
+    color: var(--_color-hover);
+}
+.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) .eds-tab-header-sub-label {
+    color: var(--_color-hover);
+}
+
+/* NAVIGATION */
+.eds-tabs .eds-tabs-navigation {
+    display: flex;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+
+.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item,
+.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item {
+    align-self: center;
+    background-color: var(--eui-c-surface-page);
+    display: none;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+}
+
+.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item {
+    left: 0;
+}
+
+.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item {
+    right: 0;
+}
+
+/* SCROLLING state */
+.eds-tabs .eds-tabs-wrapper.eds-tabs-wrapper--scrolling .eds-tab-items {
+    padding-left: var(--eui-s-5xl);
+}
+.eds-tabs .eds-tabs-wrapper.eds-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item {
+    min-width: unset;
+    overflow: unset;
+}
+.eds-tabs .eds-tabs-wrapper.eds-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,
+.eds-tabs .eds-tabs-wrapper.eds-tabs-wrapper--scrolling .eds-tabs-navigation__right-item {
+    display: flex;
+}
+
+/* TAB BODY */
+.eds-tabs .eds-tab-body-container .eds-tab__body {
+    padding: var(--eds-sp-s);
+}
+/* inlined base.eds-focus-visible */
+.eds-tabs .eds-tab-body-container .eds-tab__body:focus-visible:not([readonly]) {
+    outline: 2px solid var(--eds-c-border-primary) !important;
+    outline-offset: -2px !important;
+    transition: none;
+}
+.eds-tabs .eds-tab-body-container .eds-tab__body.eds-tab__body--no-padding {
+    padding: 0;
+}
+
+/* eds-tabs-right-content sub-component (Angular inline styles) */
+.eds-tabs-right-content {
+    display: flex;
+    margin-left: auto;
+}

package/eds-tabs/eds-tabs.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { type EdsTabProps } from './eds-tab.js';
+/** Detail payload emitted by the tab callbacks (mirrors Angular `{ tab, index }`). */
+export interface EdsTabsChangeEvent {
+    /** The props of the affected `EdsTab`. */
+    tab: EdsTabProps;
+    /** The index of the affected tab (within the full tab list). */
+    index: number;
+}
+export interface EdsTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Index of the active tab (controlled). When provided, the parent owns selection and must
+     * update it via `onTabActivate` / `onTabClick`. Leave undefined for uncontrolled mode.
+     */
+    activeTabIndex?: number;
+    /**
+     * Initial active tab index for uncontrolled mode (Angular `activeTabIndex` default).
+     * @default 0
+     */
+    defaultActiveTabIndex?: number;
+    /**
+     * Sets the `aria-label` attribute for the tablist.
+     * @default 'EDS Tabs'
+     */
+    ariaLabel?: string;
+    /**
+     * Data attribute for e2e testing (reflected as `data-e2e`).
+     * @default 'eds-tabs'
+     */
+    e2eAttr?: string;
+    /**
+     * Marks the tabs as a main navigation bar — disables the auto-scroll-into-view on activation.
+     * @default false
+     */
+    isMainNavigation?: boolean;
+    /** Renders a flat tab bar (parity flag, ported from Angular `isFlat`). @default false */
+    isFlat?: boolean;
+    /** Applies the navbar color variant (removes the wrapper bottom border). @default false */
+    isNavBar?: boolean;
+    /**
+     * Color variant of the tabs. Maps to the Angular `EdsColorDirective` host modifier classes
+     * (`eds-tabs--brand` / `eds-tabs--neutral`). @default undefined (base colors)
+     */
+    color?: EdsTabsColor;
+    /** Fired when a tab is closed (Angular `tabClose`). */
+    onTabClose?: (event: EdsTabsChangeEvent) => void;
+    /** Fired when a tab is activated (Angular `tabActivate`). */
+    onTabActivate?: (event: EdsTabsChangeEvent) => void;
+    /** Fired when a tab header is clicked (Angular `tabClick`). */
+    onTabClick?: (event: EdsTabsChangeEvent) => void;
+    /**
+     * Content pinned to the right of the tab bar (Angular
+     * `<ng-content select="eds-tabs-right-content">`). Pass an `<EdsTabsRightContent>`.
+     */
+    rightContent?: React.ReactNode;
+    /** The tabs — one or more `<EdsTab>` elements. */
+    children?: React.ReactNode;
+}
+/**
+ * Local narrowed color union — the tabs' color contract. Mirrors the Angular
+ * `EdsColorDirective` values applied to the host (`eds-tabs--brand` / `eds-tabs--neutral`).
+ */
+export type EdsTabsColor = 'brand' | 'neutral';
+/**
+ * `EdsTabs` — pure React port of the Angular `eds-tabs`.
+ *
+ * Renders a WAI-ARIA tabs pattern: a `role="tablist"` of `role="tab"` items and a single active
+ * `role="tabpanel"`. It reads its `EdsTab` children (the React analog of Angular's
+ * `@ContentChildren(EdsTab)`), extracting each tab's `EdsTabHeader` and `EdsTabBody` slots to
+ * build the bar and the active panel. Supports controlled selection (`activeTabIndex` +
+ * `onTabActivate`/`onTabClick`) and uncontrolled selection (`defaultActiveTabIndex`).
+ *
+ * Keyboard: roving `tabindex` (only the active tab is tabbable); Arrow Left/Right cycle focus,
+ * Home/End jump to first/last, Enter activates, Delete closes a closable tab — reimplemented with
+ * refs + a key handler (no CDK `FocusKeyManager`). Overflowing tab bars get left/right scroll
+ * buttons that translate the tab strip, matching the Angular scroll behavior.
+ */
+export declare const EdsTabs: React.ForwardRefExoticComponent<EdsTabsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=eds-tabs.d.ts.map

package/eds-tabs/eds-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-tabs.d.ts","sourceRoot":"","sources":["../../src/eds-tabs/eds-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAKxD,sFAAsF;AACtF,MAAM,WAAW,kBAAkB;IAC/B,0CAA0C;IAC1C,GAAG,EAAE,WAAW,CAAC;IACjB,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uDAAuD;IACvD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,6DAA6D;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AA4C/C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,qFA+XlB,CAAC"}