integration/templates/astro-node/src/pages/billing/plan-details-btn.astro (3)

6-12: Wrap with SignedIn to enforce correct usage

Button requires an authenticated user; the example should demonstrate best practice.

 ---
-import { __experimental_PlanDetailsButton as PlanDetailsButton } from '@clerk/astro/components';
+import { __experimental_PlanDetailsButton as PlanDetailsButton, SignedIn } from '@clerk/astro/components';
 import Layout from '../../layouts/Layout.astro';
 ---
 
 <Layout title="Plan Details Button">
   <main>
-    <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
-      Plan details
-    </PlanDetailsButton>
+    <SignedIn>
+      <PlanDetailsButton planId="your_plan_id_here">
+        Plan details
+      </PlanDetailsButton>
+    </SignedIn>
   </main>
 </Layout>

---

8-10: Avoid hard-coding real plan ids in templates

Use a placeholder to prevent confusion or accidental coupling to internal resources.

-    <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>
+    <PlanDetailsButton planId="your_plan_id_here">

---

1-12: Add integration tests for the new Astro billing pages

No tests were added. Please add basic integration/E2E checks that:

• route renders,
• button exists and is focusable/clickable,
• ideally, click wiring stubs out Clerk open calls without real network.

I can draft Playwright tests under integration/** to cover these pages. Want me to open a follow-up PR with test scaffolding?

packages/astro/src/react/utils.tsx (1)

49-68: Add explicit return type to assertSingleChild

This is an exported utility in a package; add an explicit return type to satisfy TS/ESLint rules and improve DX.

 export const assertSingleChild =
   (children: React.ReactNode) =>
   (
     name:
       | 'SignInButton'
       | 'SignUpButton'
       | 'SignOutButton'
       | 'SignInWithMetamaskButton'
       | 'SubscriptionDetailsButton'
       | 'CheckoutButton'
-      | 'PlanDetailsButton',
-  ) => {
+      | 'PlanDetailsButton',
+  ): React.ReactElement | string => {
     try {
       return React.Children.only(children);
     } catch {
       return `You've passed multiple children components to <${name}/>. You can only pass a single child component or text.`;
     }
   };

packages/vue/src/utils/childrenUtils.ts (1)

15-24: Default rendered button should have type="button"

Prevents unintended form submission when used inside forms, and matches the React util’s behavior.

 export const normalizeWithDefaultValue = (slotContent: VNode[] | undefined, defaultValue: string) => {
   // Render a button with the default value if no slot content is provided
   if (!slotContent) {
-    return h('button', defaultValue);
+    return h('button', { type: 'button' }, defaultValue);
   }

   // Render a button with the slot content if it's a text node
   if (slotContent[0].type === Text) {
-    return h('button', slotContent);
+    return h('button', { type: 'button' }, slotContent);
   }

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro (2)

17-24: Set type="button" by default when rendering a native

Avoids accidental form submissions if consumers don’t specify type. Compute tagProps once and spread.

 const {
   as: Tag = 'button',
   asChild,
   for: _for,
   subscriptionDetailsProps,
   onSubscriptionCancel,
   ...props
 } = Astro.props;
 
+const tagProps = {
+  ...props,
+  ...(Tag === 'button' && !('type' in props) ? { type: 'button' } : {}),
+};
@@
   ) : (
     <Tag
-      {...props}
+      {...tagProps}
       data-clerk-unstyled-id={safeId}
     >
       <slot>Subscription details</slot>
     </Tag>
   )

Also applies to: 44-49

---

1-52: Add tests for the Astro unstyled button behavior

Please add a minimal browser test that:

• mounts the component in a page (with and without asChild),
• verifies data-clerk-unstyled-id is present,
• verifies click handler invokes a stubbed __internal_openSubscriptionDetails.

I can scaffold an Astro integration test harness with a mock window.Clerk and run assertions via Playwright. Want me to push a test bundle?

packages/vue/src/components/SubscriptionDetailsButton.vue (1)

1-50: Add component tests

Please add unit tests to assert:

• multiple default slot children throw the expected error,
• attrs (class, disabled) are forwarded to the rendered child,
• click calls __internal_openSubscriptionDetails with correct options.

I can add Vitest + Vue Test Utils tests exercising these cases. Want me to include the scaffolding?

packages/vue/tsup.config.ts (1)

20-27: Minor: the EsbuildPlugin alias is now unused; either remove it or reintroduce typing for the plugin list.

Since the explicit casts were dropped, Line 7’s type EsbuildPlugin = … is dead code. Two options:

• Keep it simple: remove the alias.
• Maintain type-safety: reintroduce casts or use satisfies with an intermediate plugins array.

Apply this diff to remove the unused alias:

- type EsbuildPlugin = NonNullable<Options['esbuildPlugins']>[number];

Alternatively, re-add precise typing:

 esbuildPlugins: [
   // Adds .vue files support
-  vuePlugin(),
+  vuePlugin() as NonNullable<Options['esbuildPlugins']>[number],
   // Automatically generates runtime props from TypeScript types/interfaces for all
   // control and UI components, adding them to Vue components during build via
   // Object.defineProperty
   autoPropsPlugin({
     include: ['**/*.ts'],
-  }),
+  }) as NonNullable<Options['esbuildPlugins']>[number],
 ],

integration/templates/vue-vite/src/router.ts (1)

50-65: Secure new billing routes and tighten route guard types

• Confirm whether PlanDetailsBtn and SubscriptionDetailsBtn should be protected by authentication. If so, add their route names to the authenticatedPages array:

   const authenticatedPages = [
     'Profile',
     'Admin',
     'CustomUserProfile',
     'CustomOrganizationProfile',
  -  // …
  +  'PlanDetailsBtn',
  +  'SubscriptionDetailsBtn',
   ];

• Harden the guard’s type-check to handle to.name being string | symbol | null:

  -} else if (!isSignedIn.value && authenticatedPages.includes(to.name)) {
  +} else if (
  +  !isSignedIn.value &&
  +  typeof to.name === 'string' &&
  +  authenticatedPages.includes(to.name)
  +) {

• (Optional) Add a lightweight E2E smoke test under integration/ to visit each billing route, assert the button renders, and verify auth enforcement.

integration/templates/vue-vite/src/views/billing/PlanDetailsBtn.vue (1)

1-9: Avoid hard-coding plan IDs; make it configurable (with a sensible fallback).

Hard-coded plan IDs easily go stale across environments. Read from a query param or env, keep a fallback for the template to work out of the box.

Apply this diff:

 <template>
   <main>
-    <PlanDetailsButton planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"> Plan details </PlanDetailsButton>
+    <PlanDetailsButton :planId="planId"> Plan details </PlanDetailsButton>
   </main>
 </template>

 <script setup lang="ts">
 import { PlanDetailsButton } from '@clerk/vue/experimental';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+// Prefer passing ?planId=... or set via env. Fallback keeps the template functional.
+const planId = (route.query.planId as string) ?? 'cplan_2wMjqdlza0hTJc4HLCoBwAiExhF';
 </script>

If you prefer envs instead, swap the planId line for:
const planId = import.meta.env.VITE_CLERK_PLAN_ID ?? 'cplan_…';

integration/templates/vue-vite/src/views/billing/CheckoutBtn.vue (3)

2-12: Optional: Provide a SignedOut fallback for better UX

Currently nothing renders for signed-out users; consider a SignedOut branch or a small notice/CTA to sign in.

---

1-17: Add basic integration/E2E coverage for the new route

Per repository guidelines, please add/extend E2E tests under integration/ to assert the button is rendered for SignedIn users and triggers the expected Clerk action.

I can scaffold a minimal Playwright test that navigates to the route, signs in via helpers, and clicks the button to assert the expected side effect. Want me to draft it?

---

4-9: Centralize planId via env/config across all templates

The cplan_2wMjqdlza0hTJc4HLCoBwAiExhF value is hard-coded in multiple template files, which risks accidental leakage and complicates testing. Define it once via an env var (e.g. VITE_CLERK_EXAMPLE_PLAN_ID or NEXT_PUBLIC_CLERK_EXAMPLE_PLAN_ID) and bind it as a prop everywhere.

Affected files:

• integration/templates/vue-vite/src/views/billing/PlanDetailsBtn.vue
• integration/templates/vue-vite/src/views/billing/CheckoutBtn.vue
• integration/templates/next-app-router/src/app/billing/plan-details-btn/page.tsx
• integration/templates/next-app-router/src/app/billing/checkout-btn/page.tsx
• integration/templates/astro-node/src/pages/billing/plan-details-btn.astro
• integration/templates/astro-node/src/pages/billing/checkout-btn.astro

Example refactor for Vue (CheckoutBtn.vue):

<template>
  <main>
    <SignedIn>
      <CheckoutButton
-       planId="cplan_2wMjqdlza0hTJc4HLCoBwAiExhF"
+       :planId="planId"
        planPeriod="month"
      >
        Checkout Now
      </CheckoutButton>
    </SignedIn>
  </main>
</template>

<script setup lang="ts">
 import { SignedIn } from '@clerk/vue';
 import { CheckoutButton } from '@clerk/vue/experimental';
+// Load from env with fallback
+const planId = import.meta.env.VITE_CLERK_EXAMPLE_PLAN_ID ?? 'cplan_example_id';
</script>

Apply analogous changes in:

• PlanDetailsBtn.vue: bind :planId="planId" and define planId in <script setup>.
• Next.js pages: use const planId = process.env.NEXT_PUBLIC_CLERK_EXAMPLE_PLAN_ID ?? 'cplan_example_id' and pass planId={planId}.
• Astro pages: use frontmatter to import planId from import.meta.env and pass planId={planId} to the component.

integration/templates/astro-node/src/pages/billing/checkout-btn.astro (2)

10-11: Parameterize planId instead of hard-coding

Move planId to an environment variable so apps generated from this template don’t ship a real/opaque ID and can configure it easily.

-      <CheckoutButton
-        planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
-        planPeriod='month'
-      >
+      <CheckoutButton
+        planId={Astro?.props?.planId ?? import.meta.env.CLERK_EXAMPLE_PLAN_ID ?? 'cplan_example_id'}
+        planPeriod='month'
+      >

If you prefer not to thread props through, reading only from import.meta.env is fine for the template.

---

8-15: Optional: Add a SignedOut branch

For parity with the Vue example and clearer behavior in templates, consider rendering a simple SignedOut message/CTA or redirect.

integration/templates/vue-vite/src/views/billing/SubscriptionDetailsBtn.vue (1)

2-4: Gate behind SignedIn for consistency and to avoid unauthenticated interactions

The Checkout and (per PR summary) Plan Details examples are gated. Align this one as well.

 <template>
   <main>
-    <SubscriptionDetailsButton> Subscription details </SubscriptionDetailsButton>
+    <SignedIn>
+      <SubscriptionDetailsButton>Subscription details</SubscriptionDetailsButton>
+    </SignedIn>
   </main>
 </template>

 <script setup lang="ts">
-import { SubscriptionDetailsButton } from '@clerk/vue/experimental';
+import { SignedIn } from '@clerk/vue';
+import { SubscriptionDetailsButton } from '@clerk/vue/experimental';
 </script>

Also applies to: 7-9

packages/astro/src/astro-components/index.ts (1)

15-17: Consider exporting the associated prop types and adding an experimental JSDoc banner

Helps consumers with TS discoverability and sets expectations about instability.

 export { default as __experimental_SubscriptionDetailsButton } from './unstyled/SubscriptionDetailsButton.astro';
 export { default as __experimental_CheckoutButton } from './unstyled/CheckoutButton.astro';
 export { default as __experimental_PlanDetailsButton } from './unstyled/PlanDetailsButton.astro';
+
+/** Experimental unstyled billing buttons — API is unstable and may change without notice. */
+export type {
+  __experimental_SubscriptionDetailsButtonProps,
+  __experimental_CheckoutButtonProps,
+  __experimental_PlanDetailsButtonProps,
+} from '@clerk/types';

packages/astro/src/astro-components/unstyled/PlanDetailsButton.astro (2)

36-39: Optional: Validate asChild usage yields an element

If the default slot is empty or starts with text, addUnstyledAttributeToFirstTag won’t find a tag and the script will no-op. Consider warning when htmlElement is empty.

Example:

if (asChild) {
  htmlElement = await Astro.slots.render('default');
  if (!htmlElement?.trim()) {
    console.warn('PlanDetailsButton: asChild requires a single root element in the default slot.');
  } else {
    htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
  }
}

---

55-63: CSP note: Inline scripts may violate strict CSP

If you plan to support strict CSP without 'unsafe-inline', consider centralizing event binding via a delegated script with nonces or external JS.

packages/vue/src/components/PlanDetailsButton.vue (3)

23-29: Avoid unnecessary type assertion on the payload

The explicit cast to __experimental_PlanDetailsButtonProps on the object literal is likely unnecessary and can mask shape mismatches. Let TS infer or type the __internal_openPlanDetails signature instead.

Apply:

-  return clerk.value.__internal_openPlanDetails({
+  return clerk.value.__internal_openPlanDetails({
     plan: props.plan,
     planId: props.planId,
     initialPlanPeriod: props.initialPlanPeriod,
     ...props.planDetailsProps,
-  } as __experimental_PlanDetailsButtonProps);
+  });

---

18-29: Add lightweight error handling around internal call

To aid debugging, wrap the call to __internal_openPlanDetails in try/catch and surface a concise, actionable log. If a repo-level logger exists, prefer it over console.

Would you like me to patch this to use your logging utility (if any) instead of console.error?

---

1-30: Docs and tests for a new public component

• Add a brief JSDoc above defineProps describing the experimental API and the expected behavior (default label, auth requirement, shape of planDetailsProps).
• No tests appear in this PR. Please add at least a smoke test for:
  • default rendering with text fallback
  • click calling __internal_openPlanDetails with the expected payload when clerk is available
  • no-op when clerk is absent

If you want, I can scaffold a minimal unit/integration test harness for Vue SFCs in this package.

packages/astro/src/react/index.ts (2)

12-16: Experimental re-exports look good; add JSDoc to clarify status and props

The aliasing to _experimental* is clear. Add JSDoc noting that these exports are experimental and their props may change.

Would you like me to draft the JSDoc block for consistency with other public APIs?

---

1-26: Tests missing for new API surface

No tests were added. Consider minimal coverage to prevent regressions:

• Rendering of each experimental button from this index path
• Ensuring the props types are emitted in the .d.ts bundle (typegen snapshot)

packages/astro/src/react/CheckoutButton.tsx (3)

1-6: Fix import order to satisfy ESLint (simple-import-sort/imports)

ESLint flagged import sorting. Apply the autofix or sort imports as below.

Apply:

-import type { __experimental_CheckoutButtonProps } from '@clerk/types';
-import React from 'react';
-
-import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
-import type { WithClerkProp } from './utils';
+import React from 'react';
+import type { __experimental_CheckoutButtonProps } from '@clerk/types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+import type { WithClerkProp } from './utils';

Then run: pnpm eslint --fix

---

9-53: Add concise JSDoc for public component and props

This is a new public API. Add JSDoc indicating:

• Experimental status
• What the button does (opens checkout flow)
• Required vs optional props and how child defaulting works (“Checkout” label, single child)
• That the click is a no-op until Clerk is loaded

I can draft the JSDoc inline if you want it ready-to-commit.

---

1-53: Tests recommended for the checkout flow

Add tests to cover:

• Default rendering with text child → normalized to
• Chaining of child onClick (verify child’s handler is invoked before checkout)
• Payload passed to __internal_openCheckout includes planId/planPeriod/for and spreads checkoutProps
• No-op when clerk is undefined

packages/astro/src/react/PlanDetailsButton.tsx (4)

1-6: Fix import order to satisfy ESLint (simple-import-sort/imports)

Same sorting issue as CheckoutButton.tsx. Apply autofix or sort as below.

Apply:

-import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
-import React from 'react';
-
-import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
-import type { WithClerkProp } from './utils';
+import React from 'react';
+import type { __experimental_PlanDetailsButtonProps } from '@clerk/types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+import type { WithClerkProp } from './utils';

Then run: pnpm eslint --fix

---

21-27: Remove unnecessary type assertion on the plan details payload

The cast to __experimental_PlanDetailsButtonProps is redundant and could hide mistakes. Let inference work or type the clerk method signature.

Apply:

       return clerk.__internal_openPlanDetails({
         plan,
         planId,
         initialPlanPeriod,
         ...planDetailsProps,
-      } as __experimental_PlanDetailsButtonProps);
+      });

---

9-15: Add concise JSDoc for the public component and props

Mirror CheckoutButton’s docs: experimental status, behavior (opens plan details modal/sheet), default label, single-child constraint, and no-op until Clerk is ready.

Happy to provide the docblock text.

---

1-41: Tests recommended for plan details flow

Cover:

• Default rendering (text → )
• Child onClick is invoked before __internal_openPlanDetails
• Payload fields plan/planId/initialPlanPeriod plus spread planDetailsProps
• No-op when clerk is undefined

packages/astro/src/react/SubscriptionDetailsButton.tsx (2)

1-6: Sort imports to satisfy ESLint (simple-import-sort/imports)

The linter requests import reordering. Suggested ordering below usually satisfies the rule. Alternatively, run the repo’s lint autofix.

Apply this diff:

-import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
-import React from 'react';
-
-import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
-import type { WithClerkProp } from './utils';
+import React from 'react';
+import type { __experimental_SubscriptionDetailsButtonProps } from '@clerk/types';
+import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk } from './utils';
+import type { WithClerkProp } from './utils';

---

7-15: Document the new public API (JSDoc) for discoverability

Per repository guidelines, public exports should have JSDoc. Add brief JSDoc to SubscriptionDetailsButton and the props alias.

Example (add above the exports):

/**

• SubscriptionDetailsButton opens Clerk's subscription details for the active user or organization.
• Renders a single child (or a default Subscription details).
  */
  export const SubscriptionDetailsButton ...

/** Props for SubscriptionDetailsButton. */
export type { __experimental_SubscriptionDetailsButtonProps as SubscriptionDetailsButtonProps };

packages/vue/src/components/CheckoutButton.vue (2)

15-22: Auth/Org checks timing: consider deferring to click time

Throwing in setup will error during SSR/hydration if a consumer accidentally places this outside . Deferring these checks to clickHandler (like the Astro unstyled path does) avoids breaking render and provides the same developer guidance at interaction time.

Possible approach: move both checks into clickHandler, early-return with the same error messages.

---

1-53: Add tests for the new public component

No tests are included in this PR. Add basic tests covering:

• renders default content and asserts single-child rule
• calls __internal_openCheckout with expected options
• enforces SignedIn and organization checks

I can scaffold Vitest component tests for this file if desired.

packages/astro/src/astro-components/unstyled/CheckoutButton.astro (1)

1-57: Add tests for the new Astro unstyled component

Consider adding integration tests verifying:

• asChild renders and wiring via data-clerk-unstyled-id
• default label, and type="button" behavior when Tag is "button"
• click invokes __internal_openCheckout with the right payload

Happy to scaffold Astro component tests using Playwright or a lightweight DOM harness.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

integration/tests/pricing-table.test.ts (3)

88-99: Make the skip intentional (fixme) and fix test title grammar

• test.fixme conveys “temporarily disabled; to be fixed,” better than skip.
• Minor grammar nit in the test title.

-  test('when signed in, clicking checkout button open checkout drawer', async ({ page, context }) => {
-    test.skip(app.name.includes('astro'), 'Still working on it');
+  test('when signed in, clicking checkout button opens checkout drawer', async ({ page, context }) => {
+    test.fixme(
+      app.name.includes('astro'),
+      'Astro: CheckoutButton E2E pending wiring of experimental billing buttons (BILL-1181)'
+    );

---

123-138: Use test.fixme with a concrete reason instead of a generic skip

Keep the rationale actionable and tied to the initiative, so it’s easier to re-enable once the Astro work lands.

-    test.skip(app.name.includes('astro'), 'Still working on it');
+    test.fixme(
+      app.name.includes('astro'),
+      'Astro: SubscriptionDetailsButton E2E pending wiring of experimental billing buttons (BILL-1181)'
+    );

---

31-37: Consolidate vague test.skip calls into test.fixme with actionable reasons

No early-return guards were found. However, there are three occurrences of
test.skip(app.name.includes('astro'), 'Still working on it') in
integration/tests/pricing-table.test.ts that should be replaced with
test.fixme and tied to their respective tracking tickets for clarity and future cleanup:

• Lines 30–34
• Lines 87–91
• Lines 122–126

Suggested diff for each block (example for the first occurrence):

-    test.skip(app.name.includes('astro'), 'Still working on it');
+    test.fixme(
+      app.name.includes('astro'),
+      'Astro: PricingTable “renders pricing details” E2E awaiting billing buttons wiring (BILL-1181)'
+    );

Please apply a similarly structured test.fixme with a clear, ticket-linked reason to the other two skips.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro (1)

55-74: Guard against null element and missing Clerk; prevent default on click

Add null checks for the queried element and window.Clerk, and prevent default to avoid unintended form submits or navigation. This mirrors patterns used in similar components.

-<script is:inline define:vars={{ props, subscriptionDetailsOptions, safeId }}>
-  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
-
-  btn.addEventListener('click', () => {
-    const clerk = window.Clerk;
+<script is:inline define:vars={{ subscriptionDetailsOptions, safeId }}>
+  const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
+  if (!btn) {
+    console.warn('SubscriptionDetailsButton: target element not found', { safeId });
+  } else {
+    btn.addEventListener('click', (evt) => {
+      evt.preventDefault();
+      const clerk = window.Clerk;
+      if (!clerk) {
+        return;
+      }
 
     // Authentication checks
-    if (!clerk.user) {
+    if (!clerk.user) {
       throw new Error('Ensure that `<SubscriptionDetailsButton />` is rendered inside a `<SignedIn />` component.');
     }
 
     if (!clerk.organization && subscriptionDetailsOptions.for === 'organization') {
       throw new Error(
         'Wrap `<SubscriptionDetailsButton for="organization" />` with a check for an active organization.',
       );
     }
 
-    return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
-  });
+    return clerk.__internal_openSubscriptionDetails(subscriptionDetailsOptions);
+    });
+  }
 </script>

packages/astro/src/astro-components/unstyled/SubscriptionDetailsButton.astro (3)

36-39: Handle empty asChild slot gracefully

If the default slot renders nothing, addUnstyledAttributeToFirstTag gets an empty string and the client querySelector returns null. Warn and skip mutation when empty.

-if (asChild) {
-  htmlElement = await Astro.slots.render('default');
-  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
-}
+if (asChild) {
+  htmlElement = await Astro.slots.render('default');
+  if (!htmlElement?.trim()) {
+    console.warn('SubscriptionDetailsButton: asChild slot is empty; button will not be interactive.', { safeId });
+  } else {
+    htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
+  }
+}

---

46-51: Default type="button" to avoid accidental form submissions

When Tag is a native button and no type is provided, browsers default to type="submit". Set a safe default.

     <Tag
       {...props}
       data-clerk-unstyled-id={safeId}
+      type={Tag === 'button' ? ((props as any)?.type ?? 'button') : undefined}
     >

---

1-75: Add tests for new experimental Astro billing button

No tests were added in this PR. Please add coverage for:

• Renders as native button with type="button" and asChild.
• Click invokes __internal_openSubscriptionDetails with correct options for user and organization.
• Guards: no-op when element missing or Clerk not available; throws helpful errors when not signed in or organization missing.

I can scaffold minimal Astro integration tests and a basic DOM click test using Playwright or Vitest + @astrojs/renderer if you prefer.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.