@lyeve-labs/ui-kit 0.41.1 → 0.42.1

package/dist/components/Button.svelte

@@ -152,6 +152,7 @@
       class="{cls} {inert ? 'pointer-events-none opacity-50' : ''}"
       aria-disabled={inert ? 'true' : undefined}
       tabindex={inert ? -1 : undefined}
+      onclick={inert ? undefined : onclick}
       {...rest}
     >
       {#if loading}<Spinner size={spinnerSize} />{/if}

package/dist/components/PluginCart.svelte

@@ -54,6 +54,12 @@
     /** The period that quote was priced for. A monthly quote says nothing about a year. */
     quotePeriod?: BillingPeriod | null;
     period?: BillingPeriod;
+    /**
+     * What the total is charged per, when it differs from `period`. A
+     * one-time payment is quoted monthly and charged once, so its host passes
+     * `'once'` and the total reads "$6.00 once" rather than "$6.00/mo".
+     */
+    per?: BillingPeriod | 'once';
     /** True while a fresh price is in flight. */
     quoting?: boolean;
     /** The count the bill will carry, when the host knows better than the cart. */
@@ -69,6 +75,21 @@
     actions?: Snippet<[{ skus: string[]; total: number | null }]>;
     /** Anything the host wants between the total and the actions. */
     notice?: Snippet;
+    /**
+     * The host's own summary, drawn in place of everything inside the aside:
+     * the title line, `error`, the list, the ladder, the total, `notice` and
+     * `actions`. For a host that prices more than the selection, such as a
+     * plan change or a discount code. The aside keeps its id, its stickiness
+     * and the bar that jumps to it on a narrow screen. `remove` takes one
+     * selected capability out and reports it through `onchange`, as unticking
+     * its card does. A capability that is not selected is left alone. `total`
+     * is null both while a price is in flight and before one is asked for, so
+     * a host that tells the two apart tracks its own request, as it does for
+     * `quoting`.
+     */
+    summary?: Snippet<[{ skus: string[]; total: number | null; remove: (sku: string) => void }]>;
+    /** The panel's name: the aside's accessible name, also printed atop the default summary. */
+    heading?: string;
     /**
      * How far below the top of the window the summary sticks on a wide
      * screen, as a CSS length. A page with a sticky header passes its height,
@@ -102,6 +123,7 @@
     quote = null,
     quotePeriod = null,
     period = 'monthly',
+    per,
     quoting = false,
     billedSkus = null,
     currency = 'USD',
@@ -111,6 +133,8 @@
     onchange,
     actions,
     notice,
+    summary,
+    heading = 'Your selection',
     stickyTop = '1rem',
     class: klass = '',
   }: Props = $props();
@@ -176,7 +200,10 @@
     ),
   );
 
-  const perLabel = $derived(period === 'annual' ? '/yr' : '/mo');
+  const perLabel = $derived.by(() => {
+    const charged = per ?? period;
+    return charged === 'once' ? ' once' : charged === 'annual' ? '/yr' : '/mo';
+  });
 
   // The volume ladder drawn as a meter: the rungs that take something off,
   // placed along the count of the last one.
@@ -301,7 +328,7 @@
                     >{plugin.name}</span
                   >
                 </span>
-                <span id="{id}-price" class="shrink-0 font-mono text-sm font-semibold text-fg">
+                <span id="{id}-price" class="shrink-0 tabular-nums text-sm font-semibold text-fg">
                   {formatCents(plugin.price_cents, currency)}<span
                     class="text-xs font-normal text-muted">/mo</span
                   >
@@ -333,13 +360,12 @@
           class="flex items-center justify-between gap-3 rounded-xl border border-brand bg-surface px-4 py-3 text-sm shadow-lg transition-colors hover:bg-surface-2"
         >
           <span class="text-fg">
-            <span class="font-semibold">{count}</span> picked{#if total !== null}<span
-                class="text-muted"
+            <span class="font-semibold">{count}</span> picked{#if total !== null}{' '}<span
+                class="text-muted">·</span
               >
-                ·
-              </span><span class="font-mono">{formatCents(total, currency)}{perLabel}</span>{/if}
+              <span class="tabular-nums">{formatCents(total, currency)}</span>{/if}
           </span>
-          <span class="font-semibold text-brand">Review</span>
+          <span class="font-semibold text-brand">Review order</span>
         </a>
       </div>
     {/if}
@@ -349,129 +375,141 @@
     id={summaryId}
     class="scroll-mt-20 self-start rounded-xl border border-line bg-surface p-5 lg:sticky"
     style:top={stickyTop}
-    aria-label="Your selection"
+    aria-label={heading}
   >
-    <div class="mb-4 flex items-center justify-between gap-2">
-      <p class="text-xs font-semibold uppercase tracking-widest text-faint">Your selection</p>
-      {#if count > 0}
-        <Badge tone="brand" size="sm">
-          {count}
-          {count === 1 ? 'capability' : 'capabilities'}
-        </Badge>
-      {/if}
-    </div>
+    {#if summary}
+      {@render summary({
+        skus: [...selected],
+        total,
+        remove: (sku) => {
+          if (selected.has(sku)) toggle(sku);
+        },
+      })}
+    {:else}
+      <div class="mb-4 flex items-center justify-between gap-2">
+        <p class="text-xs font-semibold uppercase tracking-widest text-faint">{heading}</p>
+        {#if count > 0}
+          <Badge tone="brand" size="sm">
+            {count}
+            {count === 1 ? 'capability' : 'capabilities'}
+          </Badge>
+        {/if}
+      </div>
 
-    {#if error}
-      <p class="mb-3 rounded-lg border border-danger/30 bg-danger/10 p-3 text-xs text-danger">
-        {error}
-      </p>
-    {/if}
+      {#if error}
+        <p class="mb-3 rounded-lg border border-danger/30 bg-danger/10 p-3 text-xs text-danger">
+          {error}
+        </p>
+      {/if}
 
-    {#if count === 0}
-      <p class="py-6 text-center text-sm text-muted">
-        Nothing picked yet. With none of these you are on the free tier, which needs no checkout.
-      </p>
-    {:else}
-      <ul class="mb-4 max-h-56 space-y-1 overflow-y-auto pe-1">
-        {#each [...selected] as sku (sku)}
-          {@const p = bySku.get(sku)}
-          <li class="flex items-center justify-between gap-2 text-xs">
-            <span class="truncate text-fg">{p?.name ?? sku}</span>
-            <span class="flex items-center gap-1">
-              <span class="font-mono text-muted">{formatCents(p?.price_cents ?? 0, currency)}</span>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onclick={() => toggle(sku)}
-                aria-label={`Take ${p?.name ?? sku} out of your selection`}
-              >
-                <X size={12} />
-              </Button>
-            </span>
-          </li>
-        {/each}
-      </ul>
+      {#if count === 0}
+        <p class="py-6 text-center text-sm text-muted">
+          Nothing picked yet. With none of these you are on the free tier, which needs no checkout.
+        </p>
+      {:else}
+        <ul class="mb-4 max-h-56 space-y-1 overflow-y-auto pe-1">
+          {#each [...selected] as sku (sku)}
+            {@const p = bySku.get(sku)}
+            <li class="flex items-center justify-between gap-2 text-xs">
+              <span class="truncate text-fg">{p?.name ?? sku}</span>
+              <span class="flex items-center gap-1">
+                <span class="tabular-nums text-muted"
+                  >{formatCents(p?.price_cents ?? 0, currency)}</span
+                >
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onclick={() => toggle(sku)}
+                  aria-label={`Take ${p?.name ?? sku} out of your selection`}
+                >
+                  <X size={12} />
+                </Button>
+              </span>
+            </li>
+          {/each}
+        </ul>
 
-      {#if rungs.length > 0}
-        <!-- The ladder as a meter, so "two more" is something a reader can
+        {#if rungs.length > 0}
+          <!-- The ladder as a meter, so "two more" is something a reader can
              see the distance to. -->
-        <div class="mb-3" aria-hidden="true">
-          <div class="relative h-1.5 rounded-full bg-surface-2">
-            <span
-              class="absolute inset-y-0 start-0 rounded-full bg-brand transition-[width] duration-progress"
-              style:width="{ladderFill}%"
-            ></span>
-            {#each rungs as r (r.plugins)}
+          <div class="mb-3" aria-hidden="true">
+            <div class="relative h-1.5 rounded-full bg-surface-2">
               <span
-                class={cn(
-                  'absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-colors',
-                  ladder.count >= r.plugins
-                    ? 'border-brand bg-brand'
-                    : 'border-line-strong bg-surface',
-                )}
-                style:left="{(r.plugins / ladderTop) * 100}%"
+                class="absolute inset-y-0 start-0 rounded-full bg-brand transition-[width] duration-progress"
+                style:width="{ladderFill}%"
               ></span>
-            {/each}
-          </div>
-          <div class="relative mt-2 h-4 text-[10px] text-muted">
-            {#each rungs as r (r.plugins)}
-              <span
-                class="absolute -translate-x-1/2 whitespace-nowrap font-mono"
-                style:left="{Math.min((r.plugins / ladderTop) * 100, 92)}%"
-              >
-                {r.plugins}+ · {r.discount_pct}%
-              </span>
-            {/each}
+              {#each rungs as r (r.plugins)}
+                <span
+                  class={cn(
+                    'absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-colors',
+                    ladder.count >= r.plugins
+                      ? 'border-brand bg-brand'
+                      : 'border-line-strong bg-surface',
+                  )}
+                  style:left="{(r.plugins / ladderTop) * 100}%"
+                ></span>
+              {/each}
+            </div>
+            <div class="relative mt-2 h-4 text-[10px] text-muted">
+              {#each rungs as r (r.plugins)}
+                <span
+                  class="absolute -translate-x-1/2 whitespace-nowrap tabular-nums"
+                  style:left="{Math.min((r.plugins / ladderTop) * 100, 92)}%"
+                >
+                  {r.plugins}+ · {r.discount_pct}%
+                </span>
+              {/each}
+            </div>
           </div>
-        </div>
-      {/if}
-
-      {#if ladder.reachedPct > 0}
-        <p class="mb-2 text-xs text-success">
-          Volume discount {ladder.reachedPct}% applied.
-        </p>
-      {/if}
-      {#if ladder.next}
-        <p class="mb-3 text-xs text-muted">
-          {ladder.next.more} more and the discount is {ladder.next.discount_pct}%.
-        </p>
-      {/if}
+        {/if}
 
-      <div class="mb-4 border-t border-line pt-3">
-        {#if total === null}
-          <p class="flex items-center gap-2 text-sm text-muted">
-            {#if quoting}
-              <Spinner size={14} />
-              Pricing your selection
-            {:else}
-              Waiting for a price.
-            {/if}
+        {#if ladder.reachedPct > 0}
+          <p class="mb-2 text-xs text-success">
+            Volume discount {ladder.reachedPct}% applied.
           </p>
-        {:else}
-          <p class="flex items-baseline justify-between gap-2">
-            <span class="text-sm text-muted">Total</span>
-            <span class="font-mono text-xl font-semibold text-fg">
-              {formatCents(total, currency)}<span class="text-sm font-normal text-muted"
-                >{perLabel}</span
-              >
-            </span>
+        {/if}
+        {#if ladder.next}
+          <p class="mb-3 text-xs text-muted">
+            {ladder.next.more} more and the discount is {ladder.next.discount_pct}%.
           </p>
-          {#if quoted && quoted.volume_discount_cents > 0}
-            <p class="mt-1 text-end text-xs text-muted">
-              {formatCents(quoted.volume_discount_cents, currency)} off the list price.
+        {/if}
+
+        <div class="mb-4 border-t border-line pt-3">
+          {#if total === null}
+            <p class="flex items-center gap-2 text-sm text-muted">
+              {#if quoting}
+                <Spinner size={14} />
+                Pricing your selection
+              {:else}
+                Waiting for a price.
+              {/if}
             </p>
-          {/if}
-          {#if quoted && quoted.community_discount_cents > 0}
-            <p class="mt-1 text-end text-xs text-success">
-              Community discount {quoted.community_discount_pct}% applied.
+          {:else}
+            <p class="flex items-baseline justify-between gap-2">
+              <span class="text-sm text-muted">Total</span>
+              <span class="tabular-nums text-xl font-semibold text-fg">
+                {formatCents(total, currency)}<span class="text-sm font-normal text-muted"
+                  >{perLabel}</span
+                >
+              </span>
             </p>
+            {#if quoted && quoted.volume_discount_cents > 0}
+              <p class="mt-1 text-end text-xs text-muted">
+                {formatCents(quoted.volume_discount_cents, currency)} off the list price.
+              </p>
+            {/if}
+            {#if quoted && quoted.community_discount_cents > 0}
+              <p class="mt-1 text-end text-xs text-success">
+                Community discount {quoted.community_discount_pct}% applied.
+              </p>
+            {/if}
           {/if}
-        {/if}
-      </div>
-    {/if}
+        </div>
+      {/if}
 
-    {#if notice}{@render notice()}{/if}
-    {#if actions}{@render actions({ skus: [...selected], total })}{/if}
+      {#if notice}{@render notice()}{/if}
+      {#if actions}{@render actions({ skus: [...selected], total })}{/if}
+    {/if}
   </aside>
 </div>

package/dist/components/PluginCart.svelte.d.ts

@@ -20,6 +20,12 @@ interface Props {
     /** The period that quote was priced for. A monthly quote says nothing about a year. */
     quotePeriod?: BillingPeriod | null;
     period?: BillingPeriod;
+    /**
+     * What the total is charged per, when it differs from `period`. A
+     * one-time payment is quoted monthly and charged once, so its host passes
+     * `'once'` and the total reads "$6.00 once" rather than "$6.00/mo".
+     */
+    per?: BillingPeriod | 'once';
     /** True while a fresh price is in flight. */
     quoting?: boolean;
     /** The count the bill will carry, when the host knows better than the cart. */
@@ -38,6 +44,25 @@ interface Props {
     }]>;
     /** Anything the host wants between the total and the actions. */
     notice?: Snippet;
+    /**
+     * The host's own summary, drawn in place of everything inside the aside:
+     * the title line, `error`, the list, the ladder, the total, `notice` and
+     * `actions`. For a host that prices more than the selection, such as a
+     * plan change or a discount code. The aside keeps its id, its stickiness
+     * and the bar that jumps to it on a narrow screen. `remove` takes one
+     * selected capability out and reports it through `onchange`, as unticking
+     * its card does. A capability that is not selected is left alone. `total`
+     * is null both while a price is in flight and before one is asked for, so
+     * a host that tells the two apart tracks its own request, as it does for
+     * `quoting`.
+     */
+    summary?: Snippet<[{
+        skus: string[];
+        total: number | null;
+        remove: (sku: string) => void;
+    }]>;
+    /** The panel's name: the aside's accessible name, also printed atop the default summary. */
+    heading?: string;
     /**
      * How far below the top of the window the summary sticks on a wide
      * screen, as a CSS length. A page with a sticky header passes its height,

package/dist/index.d.ts

@@ -107,4 +107,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.41.1";
+export declare const VERSION = "0.42.1";

package/dist/index.js

@@ -119,4 +119,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line. The build and the test suite fail when the two disagree.
-export const VERSION = '0.41.1';
+export const VERSION = '0.42.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.41.1",
+  "version": "0.42.1",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",