@kernhq/module-billing 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernhq/module-billing",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Kern billing module: plans, entitlements, subscriptions and Stripe — the mechanism that lets any Kern instance sell seats on itself",
   "homepage": "https://github.com/KernAIO/module-billing#readme",
   "license": "AGPL-3.0-only",

package/src/client/settings/PlanSettings.svelte

@@ -323,7 +323,8 @@ function once(run: () => void) {
     </EmptyState>
   {:else}
     <!-- current plan -->
-    <Card>
+    <!-- The card's own padding is off so the 20px inside is the only padding, on every side. -->
+    <Card padding="none">
       <div class="grid gap-4 p-5">
         <div class="flex flex-wrap items-start justify-between gap-3">
           <div class="grid gap-1">
@@ -419,15 +420,16 @@ function once(run: () => void) {
               last line with the card's padding pooled underneath. The layout lives on an element
               of our own inside the card.
             -->
-            <Card class="p-4">
-              <div class="grid h-full content-between gap-5">
+            <Card padding="none">
+              <div class="grid h-full content-between gap-5 p-5">
               <div class="grid gap-2">
                 <div class="flex items-center justify-between gap-2">
                   <span class="text-[15px] font-medium text-[var(--kern-ink-900)]">{plan.name}</span>
                   {#if isCurrent}<Badge tone="accent">{t('current')}</Badge>{/if}
                 </div>
                 <div class="flex items-baseline gap-1.5">
-                  <span class="text-[22px] font-medium text-[var(--kern-ink-900)]">
+                  <!-- 22px type at the default line-height leaves a hole above the digits. -->
+                  <span class="text-[22px] font-medium leading-none text-[var(--kern-ink-900)]">
                     {formatMoney(plan.priceMinor, plan.currency, locale)}
                   </span>
                   <span class="text-[12px] text-[var(--kern-ink-400)]">{priceNote(plan)}</span>
@@ -436,16 +438,19 @@ function once(run: () => void) {
                   Free text an administrator typed, in whatever language they typed it. Under a
                   Persian screen an English highlight rendered backwards — "2 GB of storage" with
                   the 2 at the far end — because the block's direction was applied to a line whose
-                  own direction is Latin. `dir="auto"` lets each line follow its first strong
-                  character; the text alignment stays with the screen.
+                  own direction is Latin. `dir="auto"` on the block fixed the order and broke the
+                  alignment — the line became a left-aligned island in a right-aligned card — and
+                  so did `unicode-bidi: plaintext`, because Chrome resolves `text-align: start`
+                  against the paragraph's resolved direction in both cases. `<bdi>` isolates the
+                  run inside a block that keeps the card's direction and alignment.
                 -->
                 {#if plan.description}
-                  <p class="text-[13px] text-[var(--kern-ink-700)]" dir="auto">{plan.description}</p>
+                  <p class="text-[13px] text-[var(--kern-ink-700)]"><bdi>{plan.description}</bdi></p>
                 {/if}
                 {#if plan.highlights.length}
                   <ul class="mt-1 grid gap-1">
                     {#each plan.highlights as h (h)}
-                      <li class="text-[12.5px] text-[var(--kern-ink-700)]" dir="auto">{h}</li>
+                      <li class="text-[12.5px] text-[var(--kern-ink-700)]"><bdi>{h}</bdi></li>
                     {/each}
                   </ul>
                 {/if}
@@ -527,4 +532,4 @@ function once(run: () => void) {
       {/if}
     </section>
   {/if}
-</div>
+</div>