@alfakit/vue 0.1.9 → 0.1.10

package/src/starter-kit/AlfakitStarterKitRoot.vue

@@ -68,8 +68,9 @@ onUnmounted(() => {
     <AlfakitRoot :toaster-id="STARTER_KIT_TOASTER_ID">
       <slot />
       <!-- The debug panel's button lives in AlfaKit's top bar, which a starter kit doesn't
-           render: float it in the corner (nothing without `alfakitDebug`). -->
-      <div data-slot="starter-kit-debug-panel" class="fixed end-16 bottom-4 z-40">
+           render: float it in the corner (nothing without `alfakitDebug`). The corner is the
+           document's right: the kit's sidebar stays on the left in a right-to-left panel language. -->
+      <div data-slot="starter-kit-debug-panel" class="fixed right-16 bottom-16 z-40">
         <DebugPanelSlot />
       </div>
     </AlfakitRoot>

package/src/starter-kit/navigation.ts

@@ -1,8 +1,10 @@
 import {
   starterKitNavigation,
   toStarterKitNavGroups,
+  toStarterKitUserMenuItems,
   type StarterKitNavGroup,
   type StarterKitNavigationSchema,
+  type StarterKitUserMenuItem,
 } from '@alfakit/core'
 import { usePage } from '@inertiajs/vue3'
 import { computed, type ComputedRef } from 'vue'
@@ -15,6 +17,11 @@ export interface AlfakitNavigation {
   navigation: StarterKitNavigationSchema | null
   /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */
   groups: StarterKitNavGroup[]
+  /**
+   * The panel's user menu links (`userMenuItems()`, Billing's entry…) for the kit's user
+   * menu: `<AlfakitUserMenuItems />` renders them with the app's dropdown items.
+   */
+  userMenuItems: StarterKitUserMenuItem[]
 }
 
 /**
@@ -33,6 +40,10 @@ export function useAlfakitNavigation(panelId?: string): ComputedRef<AlfakitNavig
   return computed(() => {
     const navigation = starterKitNavigation(page.props, panelId)
 
-    return { navigation, groups: toStarterKitNavGroups(navigation?.groups) }
+    return {
+      navigation,
+      groups: toStarterKitNavGroups(navigation?.groups),
+      userMenuItems: toStarterKitUserMenuItems(navigation?.userMenu),
+    }
   })
 }

package/src/styles.css

@@ -289,7 +289,8 @@
 }
 /* Rich editor mentions, merge tags and custom blocks (RichEditor extensions) */
 .alfakit-prose :where(.alfakit-mention):not(:where(.alfakit-not-prose *)) {
-  @apply bg-primary/10 text-primary rounded px-1 font-medium;
+  /* Full-contrast text on the tint (WCAG AA); the ring marks it as a mention. */
+  @apply bg-primary/10 text-foreground ring-primary/30 rounded px-1 font-medium ring-1;
 }
 .alfakit-prose :where(.alfakit-merge-tag):not(:where(.alfakit-not-prose *)) {
   @apply bg-muted text-muted-foreground rounded px-1 font-mono text-xs;