@lumx/react 4.19.1-alpha.2 → 4.19.1-alpha.4

package/index.d.ts

@@ -5318,6 +5318,11 @@ interface CommonTabProps extends HasClassName {
     isActive?: boolean;
     /** Synonym for `isActive` — `'page'` marks the tab as active (WAI-ARIA nav-link convention). */
     'aria-current'?: 'page' | boolean;
+    /**
+     * WAI-ARIA `tab` role, resolved by the framework wrapper from `TabProvider` presence:
+     * `'tab'` inside a provider (classic tab mode), `undefined` outside (nav-link mode).
+     */
+    role?: 'tab';
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Label content. */
@@ -5338,8 +5343,6 @@ interface CommonTabProps extends HasClassName {
     tabIndexProp?: string;
     /** Name of the prop used to attach the keypress event (framework-dependent). */
     keyPressProp?: string;
-    /** ID applied to the tab button element (for aria-labelledby on the panel). */
-    tabId?: string;
     /** ID of the associated tab panel (for aria-controls). */
     tabPanelId?: string;
     /** Icon component injected by the framework wrapper. */
@@ -5358,17 +5361,18 @@ type TabAsProps<E extends TabElement = 'button'> = {
     as?: E;
 } & (E extends 'a' ? HasRequiredLinkHref<'a'> : unknown);
 /**
- * Props of the `Tab` component. Polymorphic on `as`: setting it enters **nav-link mode**,
- * rendering that element instead of a `<button role="tab">`. The `href` conditional's false
- * branch is `unknown` (not a record) to avoid widening `keyof TabProps`.
+ * Props of the `Tab` component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element, while **mode is driven by `TabProvider` presence** (via the wrapper-resolved
+ * `role`), not by `as`. The `href` conditional's false branch is `unknown` (not a record) to avoid
+ * widening `keyof TabProps`.
  */
 type TabProps$1<E extends TabElement = 'button'> = CommonTabProps & TabAsProps<E>;
-type TabPropsToOverride = 'as' | 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+type TabPropsToOverride = 'as' | 'role' | 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabPanelId' | 'Icon' | 'Text';
 
 /**
- * Defines the props of the component. Polymorphic on `as`: unset it's a classic
- * `<button role="tab">`; set it (`as="a"` with required `href`, or `as={RouterLink}`) for
- * nav-link mode. The forwarded ref type follows `as`.
+ * Defines the props of the component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element (`as="a"` with required `href`, or `as={RouterLink}`), while the mode
+ * (`role="tab"` vs nav-link) is driven by `TabProvider` presence. The forwarded ref type follows `as`.
  */
 type TabProps<E extends ElementType$1 = 'button'> = GenericProps$1 & HasPolymorphicAs$1<E> & HasRequiredLinkHref$1<E> & ReactToJSX<TabProps$1, TabPropsToOverride> & {
     /** Children are not supported. */
@@ -5390,8 +5394,10 @@ type TabProps<E extends ElementType$1 = 'button'> = GenericProps$1 & HasPolymorp
  * Tab component.
  *
  * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * when rendered inside a `TabProvider`.
  *
- * In nav-link mode (`as` set): plain link, no `role="tab"`/roving tabindex/`changeToTab` dispatch.
+ * Outside a `TabProvider` (nav-link mode): plain link, no `role="tab"`/roving tabindex/`changeToTab`
+ * dispatch — only `aria-current` marks the active item.
  *
  * @param  props Component props.
  * @param  ref   Component ref (type follows `as`).

package/index.js

@@ -21013,10 +21013,11 @@ const {
 } = bem(CLASSNAME$6);
 
 /**
- * Tab component. Two modes keyed on `as`: classic (no `as`) implements the WAI-ARIA `tab` role
+ * Tab component. Two modes keyed on `TabProvider` presence (via the wrapper-resolved `role`):
+ * tab mode (`role === 'tab'`, inside a provider) implements the WAI-ARIA `tab` role
  * {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label};
- * nav-link (`as` set) renders plain link semantics (`aria-current`, no tab role/aria), decoupled
- * from the TabProvider.
+ * nav-link mode (no provider) renders plain link semantics (`aria-current`, no tab role/aria).
+ * `as` only selects the rendered element and applies in both modes.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
@@ -21033,6 +21034,7 @@ const Tab$1 = props => {
     id,
     isActive: isActiveProp,
     'aria-current': ariaCurrent,
+    role,
     label,
     handleFocus,
     handleKeyPress,
@@ -21042,7 +21044,6 @@ const Tab$1 = props => {
     changeToTab,
     tabPanelId,
     shouldActivateOnFocus,
-    tabId,
     Icon,
     Text,
     ref,
@@ -21050,8 +21051,8 @@ const Tab$1 = props => {
   } = props;
   const isActive = isActiveProp ?? ariaCurrent === 'page';
   let rawClickableProps;
-  if (as === 'button') {
-    // Mode: WAI-ARIA `tab` role
+  if (role === 'tab') {
+    // Mode: WAI-ARIA `tab` role (inside a TabProvider)
     const changeToCurrentTab = () => {
       if (isAnyDisabled) {
         return;
@@ -21098,7 +21099,7 @@ const Tab$1 = props => {
   return RawClickable({
     ...rawClickableProps,
     as,
-    id: tabId,
+    id,
     className: classnames(className, block$6({
       'is-active': isActive,
       'is-disabled': isAnyDisabled
@@ -21119,17 +21120,19 @@ const Tab$1 = props => {
 };
 
 /**
- * Defines the props of the component. Polymorphic on `as`: unset it's a classic
- * `<button role="tab">`; set it (`as="a"` with required `href`, or `as={RouterLink}`) for
- * nav-link mode. The forwarded ref type follows `as`.
+ * Defines the props of the component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element (`as="a"` with required `href`, or `as={RouterLink}`), while the mode
+ * (`role="tab"` vs nav-link) is driven by `TabProvider` presence. The forwarded ref type follows `as`.
  */
 
 /**
  * Tab component.
  *
  * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * when rendered inside a `TabProvider`.
  *
- * In nav-link mode (`as` set): plain link, no `role="tab"`/roving tabindex/`changeToTab` dispatch.
+ * Outside a `TabProvider` (nav-link mode): plain link, no `role="tab"`/roving tabindex/`changeToTab`
+ * dispatch — only `aria-current` marks the active item.
  *
  * @param  props Component props.
  * @param  ref   Component ref (type follows `as`).
@@ -21148,24 +21151,28 @@ const Tab = Object.assign(forwardRefPolymorphic((props, ref) => {
     onKeyPress,
     ...forwardedProps
   } = otherProps;
-  const isNavLink = as != 'button';
 
   // Register into the provider (if any) so it can track this tab's index / active state.
   const tabState = useTabProviderContext('tab', id);
+  // In a provider => tab mode (role="tab"); outside => nav-link mode. Mirrors TabList's role.
+  const inProvider = tabState !== undefined;
   const {
     isLazy: _isLazy,
+    tabId,
     ...state
   } = tabState ?? {};
-  // Nav-link tabs ignore the provider's active index — active state is caller-controlled only.
-  const isActive = isNavLink ? propIsActive : propIsActive || state?.isActive;
+  // Without a provider there's no active index, so this collapses to the caller-provided value.
+  const isActive = propIsActive || state?.isActive;
   return Tab$1({
     ...forwardedProps,
-    id,
     ...state,
     as,
+    role: inProvider ? 'tab' : undefined,
     Icon,
     Text,
     ref,
+    // Falls back to the caller-provided `id` when there's no TabProvider to generate one.
+    id: tabId || id,
     isActive,
     isAnyDisabled,
     isDisabled: isAnyDisabled,