@kirchdev/duxt 0.3.4 → 0.3.5-dev-main.43-3310f4b

package/app/components/content/Steps.vue

@@ -8,12 +8,14 @@
        get no marker at all. And the list PADDING: typeset gives every `ol` a
        `padding-inline-start` and every `li` one of its own, which pushed the
        items — and with them the markers, positioned relative to each item —
-       clear of the rail they are supposed to sit on. `pl-0` on both puts the
+       clear of the rail they are supposed to sit on. `ps-0` on both puts the
        item's edge back at the container's own padding, which is what
-       `-left-9` is measured against: 1.5rem in, 2.25rem back out, half a
-       marker wide — centred on the line. -->
+       `-start-9` is measured against: 1.5rem in, 2.25rem back out, half a
+       marker wide — centred on the line. The logical spellings matter twice
+       over here: typeset's own indent is `padding-inline-start`, so a `pl-0`
+       reset would miss it entirely in a right-to-left page. -->
   <div
-    class="my-6 border-l pl-6 [counter-reset:step] [&>ol]:ml-0 [&>ol]:list-none [&>ol]:pl-0 [&>ol>li]:relative [&>ol>li]:my-6 [&>ol>li]:pl-0 [&>ol>li]:[counter-increment:step] [&>ol>li]:before:absolute [&>ol>li]:before:-left-9 [&>ol>li]:before:flex [&>ol>li]:before:size-6 [&>ol>li]:before:items-center [&>ol>li]:before:justify-center [&>ol>li]:before:rounded-full [&>ol>li]:before:bg-muted [&>ol>li]:before:text-xs [&>ol>li]:before:font-medium [&>ol>li]:before:text-foreground [&>ol>li]:before:content-[counter(step)]"
+    class="my-6 border-s ps-6 [counter-reset:step] [&>ol]:ms-0 [&>ol]:list-none [&>ol]:ps-0 [&>ol>li]:relative [&>ol>li]:my-6 [&>ol>li]:ps-0 [&>ol>li]:[counter-increment:step] [&>ol>li]:before:absolute [&>ol>li]:before:-start-9 [&>ol>li]:before:flex [&>ol>li]:before:size-6 [&>ol>li]:before:items-center [&>ol>li]:before:justify-center [&>ol>li]:before:rounded-full [&>ol>li]:before:bg-muted [&>ol>li]:before:text-xs [&>ol>li]:before:font-medium [&>ol>li]:before:text-foreground [&>ol>li]:before:content-[counter(step)]"
   >
     <slot />
   </div>

package/app/components/content/TabGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TabsList, TabsRoot, TabsTrigger } from 'reka-ui';
+import { TabsRoot } from 'reka-ui';
 
 /**
  * `::tab-group` with `:::tab{label="…"}` children.
@@ -11,11 +11,11 @@ import { TabsList, TabsRoot, TabsTrigger } from 'reka-ui';
  * A content component may not take a name the UI kit owns. `::code-group` next
  * to it reads the same way, which is the consolation.
  *
- * Built on reka-ui's primitives directly rather than on the shadcn `Tabs`
- * wrapper, because the labels are not known until the children have registered
- * themselves: MDC hands them in as slot content, not as a prop. A provide/inject
- * pair collects them, which is also what makes a `:::tab` work at any depth
- * inside the block.
+ * The root is reka-ui's own, because the labels are not known until the
+ * children have registered themselves: MDC hands them in as slot content, not as
+ * a prop. A provide/inject pair collects them, which is also what makes a
+ * `:::tab` work at any depth inside the block. The strip is the UI kit's, in its
+ * `underline` look.
  *
  * Keyboard navigation, roving focus and the ARIA roles come from reka-ui — the
  * reason not to hand-roll this out of divs.
@@ -39,19 +39,20 @@ provide<DuxtTabGroupContext>('duxt-tabs', {
 
 <template>
   <TabsRoot v-model="active" class="my-6">
-    <TabsList
-      class="flex gap-1 border-b"
+    <UiTabsList
+      variant="bare"
+      class="border-b"
       :aria-label="$t('duxt.page.tabs') as string"
     >
-      <TabsTrigger
+      <UiTabsTrigger
         v-for="tab in tabs"
         :key="tab.value"
         :value="tab.value"
-        class="-mb-px cursor-pointer border-b-2 border-transparent px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground"
+        variant="underline"
       >
         {{ tab.label }}
-      </TabsTrigger>
-    </TabsList>
+      </UiTabsTrigger>
+    </UiTabsList>
 
     <slot />
   </TabsRoot>

package/app/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('[&>svg]:size-3.5', props.class)"
   >
     <slot>
-      <Icon name="lucide:chevron-right" />
+      <Icon name="lucide:chevron-right" class="rtl:-scale-x-100" />
     </slot>
   </li>
 </template>

package/app/components/ui/command/CommandShortcut.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <span
     data-slot="command-shortcut"
     :class="
-      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
+      cn('text-muted-foreground ms-auto text-xs tracking-widest', props.class)
     "
   >
     <slot />

package/app/components/ui/dialog/DialogContent.vue

@@ -28,7 +28,7 @@ const props = withDefaults(
 );
 const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'showCloseButton');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
@@ -51,7 +51,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       <DialogClose
         v-if="showCloseButton"
         data-slot="dialog-close"
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        class="ring-offset-background focus-visible:ring-ring absolute top-3 end-3 inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
         <Icon name="lucide:x" />
         <span class="sr-only">Close</span>

package/app/components/ui/dialog/DialogHeader.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="dialog-header"
-    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-2 text-center sm:text-start', props.class)"
   >
     <slot />
   </div>

package/app/components/ui/dialog/DialogScrollContent.vue

@@ -54,7 +54,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <slot />
 
         <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+          class="absolute top-4 end-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
           <Icon name="lucide:x" class="w-4 h-4" />
           <span class="sr-only">Close</span>

package/app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -28,13 +28,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        `focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
         props.class
       )
     "
   >
     <span
-      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+      class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
     >
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">

package/app/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -31,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        `relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
+        `relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
         props.class
       )
     "

package/app/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
     :class="
-      cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)
+      cn('px-2 py-1.5 text-sm font-medium data-[inset]:ps-8', props.class)
     "
   >
     <slot />

package/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -29,13 +29,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        `focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+        `focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
         props.class
       )
     "
   >
     <span
-      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+      class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
     >
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">

package/app/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <span
     data-slot="dropdown-menu-shortcut"
     :class="
-      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
+      cn('text-muted-foreground ms-auto text-xs tracking-widest', props.class)
     "
   >
     <slot />

package/app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -23,12 +23,12 @@ const forwardedProps = useForwardProps(delegatedProps);
     :data-inset="inset ? '' : undefined"
     :class="
       cn(
-        `relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
+        `relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!`,
         props.class
       )
     "
   >
     <slot />
-    <Icon name="lucide:chevron-right" class="ml-auto size-4" />
+    <Icon name="lucide:chevron-right" class="ms-auto size-4 rtl:-scale-x-100" />
   </DropdownMenuSubTrigger>
 </template>

package/app/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out ltr:data-[motion=from-end]:slide-in-from-right-52 ltr:data-[motion=from-start]:slide-in-from-left-52 ltr:data-[motion=to-end]:slide-out-to-right-52 ltr:data-[motion=to-start]:slide-out-to-left-52 rtl:data-[motion=from-end]:slide-in-from-left-52 rtl:data-[motion=from-start]:slide-in-from-right-52 rtl:data-[motion=to-end]:slide-out-to-left-52 rtl:data-[motion=to-start]:slide-out-to-right-52 top-0 start-0 w-full p-2 pe-2.5 md:absolute md:w-auto',
         'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
         props.class
       )

package/app/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     <slot />
     <Icon
       name="lucide:chevron-down"
-      class="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      class="relative top-px ms-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>

package/app/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+  <div class="absolute top-full start-0 isolate z-50 flex justify-center">
     <NavigationMenuViewport
       data-slot="navigation-menu-viewport"
       v-bind="forwardedProps"

package/app/components/ui/scroll-area/ScrollBar.vue

@@ -23,7 +23,7 @@ const delegatedProps = reactiveOmit(props, 'class');
       cn(
         'flex touch-none p-px transition-colors select-none',
         orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
+          'h-full w-2.5 border-s border-s-transparent',
         orientation === 'horizontal' &&
           'h-2.5 flex-col border-t border-t-transparent',
         props.class

package/app/components/ui/select/SelectItem.vue

@@ -24,12 +24,12 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class
       )
     "
   >
-    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute end-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
         <Icon name="lucide:check" class="size-4" />
       </SelectItemIndicator>

package/app/components/ui/sheet/SheetContent.vue

@@ -11,9 +11,28 @@ import {
 import { cn } from '@duxt/lib/utils';
 import SheetOverlay from './SheetOverlay.vue';
 
+/**
+ * `start` and `end` are ADDED beside `left` and `right`, never instead of them.
+ *
+ * A consumer asking for `side="left"` means the left of the screen and should
+ * keep getting it — a drawer pinned to a fixed edge is a legitimate thing to
+ * want, and silently redefining the word would move somebody's sheet the first
+ * time they shipped a right-to-left locale. `start` and `end` are the ones that
+ * follow the reader, and they are what this layer's own navigation uses.
+ *
+ * THE DEFAULT IS LOGICAL, the same answer `SidebarProps.side` gives. The two
+ * props ask one question and it would be strange to answer it twice: a sheet
+ * opened with no side named is not a sheet somebody pinned to an edge, it is
+ * one nobody thought about, and the theme's default for a thing nobody thought
+ * about is to follow the reader. `end` resolves to `right` in every locale this
+ * layer ships, so nothing moves today; what changes is the consumer who writes
+ * a bare `<UiSheetContent>` and later declares `dir: 'rtl'`, for whom the panel
+ * arrives on the side the page starts from rather than needing a second edit.
+ * Naming `right` explicitly is still how you pin it to the screen's right.
+ */
 interface SheetContentProps extends DialogContentProps {
   class?: HTMLAttributes['class'];
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  side?: 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
 }
 
 defineOptions({
@@ -21,7 +40,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: 'right'
+  side: 'end'
 });
 const emits = defineEmits<DialogContentEmits>();
 
@@ -46,6 +65,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
           side === 'bottom' &&
             'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          // The logical pair. Everything but the slide is expressible
+          // logically; `slide-in-from-*` names a physical edge and has no
+          // logical spelling at all, so each direction states its own.
+          side === 'start' &&
+            'ltr:data-[state=closed]:slide-out-to-left ltr:data-[state=open]:slide-in-from-left rtl:data-[state=closed]:slide-out-to-right rtl:data-[state=open]:slide-in-from-right inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm',
+          side === 'end' &&
+            'ltr:data-[state=closed]:slide-out-to-right ltr:data-[state=open]:slide-in-from-right rtl:data-[state=closed]:slide-out-to-left rtl:data-[state=open]:slide-in-from-left inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm',
           props.class
         )
       "
@@ -58,7 +84,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
            the 24px target size axe asks for. Same ghost treatment as every
            other icon button in the header, so it reads as one. -->
       <DialogClose
-        class="ring-offset-background focus:ring-ring absolute top-3 right-3 flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+        class="ring-offset-background focus:ring-ring absolute top-3 end-3 flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
         <Icon name="lucide:x" class="size-5" />
         <span class="sr-only">Close</span>

package/app/components/ui/sidebar/Sidebar.vue

@@ -5,6 +5,7 @@ import { Sheet, SheetContent } from '@duxt/components/ui/sheet';
 import SheetDescription from '@duxt/components/ui/sheet/SheetDescription.vue';
 import SheetHeader from '@duxt/components/ui/sheet/SheetHeader.vue';
 import SheetTitle from '@duxt/components/ui/sheet/SheetTitle.vue';
+import { useDirection } from 'reka-ui';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
 
 defineOptions({
@@ -12,12 +13,35 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<SidebarProps>(), {
-  side: 'left',
+  side: 'start',
   variant: 'sidebar',
   collapsible: 'offcanvas'
 });
 
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+/**
+ * The logical side, resolved to a physical one ONCE.
+ *
+ * Everything below this line — `data-side`, the rail's `[data-side=left]`
+ * selectors, the border and offset classes — is physical and stays physical,
+ * because it describes where the panel actually is on the screen. Turning
+ * `start` into `left` here is what lets all of it keep working while the prop
+ * a consumer writes follows the reader.
+ *
+ * reka's `useDirection` rather than the i18n locale: this is a ui primitive,
+ * and the `ConfigProvider` the app shell mounts is the one place the direction
+ * is already published to components that must not know about i18n.
+ */
+const direction = useDirection();
+
+const resolvedSide = computed(() => {
+  if (props.side === 'start')
+    return direction.value === 'rtl' ? 'right' : 'left';
+  if (props.side === 'end') return direction.value === 'rtl' ? 'left' : 'right';
+
+  return props.side;
+});
 </script>
 
 <template>
@@ -45,7 +69,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
       data-sidebar="sidebar"
       data-slot="sidebar"
       data-mobile="true"
-      :side="side"
+      :side="resolvedSide"
       class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH_MOBILE
@@ -68,7 +92,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"
-    :data-side="side"
+    :data-side="resolvedSide"
   >
     <!-- This is what handles the sidebar gap on desktop  -->
     <div
@@ -87,7 +111,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
       :class="
         cn(
           'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-          side === 'left'
+          resolvedSide === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.

package/app/components/ui/sidebar/SidebarGroupAction.vue

@@ -19,7 +19,7 @@ const props = defineProps<
     :as-child="asChild"
     :class="
       cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 end-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'after:absolute after:-inset-2 md:after:hidden',
         'group-data-[collapsible=icon]:hidden',
         props.class

package/app/components/ui/sidebar/SidebarInset.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
     :class="
       cn(
         'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2',
         props.class
       )
     "

package/app/components/ui/sidebar/SidebarMenuAction.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
     data-sidebar="menu-action"
     :class="
       cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'after:absolute after:-inset-2 md:after:hidden',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',

package/app/components/ui/sidebar/SidebarMenuBadge.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
     data-sidebar="menu-badge"
     :class="
       cn(
-        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
         'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',

package/app/components/ui/sidebar/SidebarMenuSub.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
     data-sidebar="menu-badge"
     :class="
       cn(
-        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'border-sidebar-border mx-3.5 flex min-w-0 ltr:translate-x-px rtl:-translate-x-px flex-col gap-1 border-s px-2.5 py-0.5',
         'group-data-[collapsible=icon]:hidden',
         props.class
       )

package/app/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -29,7 +29,7 @@ const props = withDefaults(
     :data-active="isActive"
     :class="
       cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 ltr:-translate-x-px rtl:translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',

package/app/components/ui/sidebar/SidebarProvider.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes, Ref } from 'vue';
-import {
-  defaultDocument,
-  useEventListener,
-  useMediaQuery,
-  useVModel
-} from '@vueuse/core';
+import { defaultDocument, useMediaQuery, useVModel } from '@vueuse/core';
 import { TooltipProvider } from 'reka-ui';
 import { computed, ref } from 'vue';
 import { cn } from '@duxt/lib/utils';
@@ -13,7 +8,6 @@ import {
   provideSidebarContext,
   SIDEBAR_COOKIE_MAX_AGE,
   SIDEBAR_COOKIE_NAME,
-  SIDEBAR_KEYBOARD_SHORTCUT,
   SIDEBAR_WIDTH,
   SIDEBAR_WIDTH_ICON
 } from './utils';
@@ -62,15 +56,12 @@ function toggleSidebar() {
     : setOpen(!open.value);
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
-  if (
-    event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-    (event.metaKey || event.ctrlKey)
-  ) {
-    event.preventDefault();
-    toggleSidebar();
-  }
-});
+// Upstream binds `⌘/Ctrl+B` here. It is gone deliberately: a global key
+// registered by a primitive is one `useDuxtShortcuts()` does not know about, so
+// the sheet cannot list it, the documentation cannot describe it and
+// `shortcuts.singleCharacter` cannot switch it off — a shortcut that works and
+// that nobody can find. `SidebarTrigger` is how the sidebar is toggled; a site
+// that wants a key for it declares one the same way the layer does.
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.

package/app/components/ui/sidebar/index.ts

@@ -3,7 +3,15 @@ import type { HTMLAttributes } from 'vue';
 import { cva } from 'class-variance-authority';
 
 export interface SidebarProps {
-  side?: 'left' | 'right';
+  /**
+   * `start`/`end` follow the reader; `left`/`right` pin to the screen.
+   *
+   * The default moved from `left` to `start`, which is the same edge in a
+   * left-to-right page and the mirrored one in a right-to-left page — so an
+   * existing site sees no change and a translated one stops being wrong. The
+   * physical pair stays for a drawer that genuinely means a fixed edge.
+   */
+  side?: 'left' | 'right' | 'start' | 'end';
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offcanvas' | 'icon' | 'none';
   class?: HTMLAttributes['class'];
@@ -36,7 +44,7 @@ export { default as SidebarTrigger } from './SidebarTrigger.vue';
 export { useSidebar } from './utils';
 
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {

package/app/components/ui/sidebar/utils.ts

@@ -6,7 +6,6 @@ export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 export const SIDEBAR_WIDTH = '16rem';
 export const SIDEBAR_WIDTH_MOBILE = '18rem';
 export const SIDEBAR_WIDTH_ICON = '3rem';
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 export const [useSidebar, provideSidebarContext] = createContext<{
   state: ComputedRef<'expanded' | 'collapsed'>;

package/app/components/ui/sonner/Sonner.vue

@@ -11,16 +11,34 @@ const {
   closeButton = true,
   duration = 4000,
   position = 'bottom-right',
+  dir,
   ...forwarded
 } = defineProps<ToasterProps>();
 
+// 4000 ms is part of this layer-owned component's notification behaviour.
+// A site needing different notification UX overrides the component instead of
+// taking on a one-purpose configuration key.
+
 const theme = computed(() => (colorMode.value === 'dark' ? 'dark' : 'light'));
+
+/**
+ * Sonner reads neither the document nor the reka provider — same as the theme
+ * above, it has to be told. Left out, a toast in a right-to-left page keeps its
+ * close button and its icon on the western side of the card.
+ *
+ * Pulled out of `forwarded` rather than bound beside it, so a caller passing
+ * `dir` explicitly still wins; the locale is the default, not an override.
+ */
+const locale = useDuxtDirection();
+
+const direction = computed(() => dir ?? locale.value);
 </script>
 
 <template>
   <Sonner
     class="toaster group"
     :theme="theme"
+    :dir="direction"
     :close-button="closeButton"
     :duration="duration"
     :position="position"

package/app/components/ui/tabs/TabsList.vue

@@ -5,11 +5,19 @@ import { reactiveOmit } from '@vueuse/core';
 import { TabsList } from 'reka-ui';
 import { cn } from '@duxt/lib/utils';
 
+/**
+ * `variant="bare"` is the strip inside a code card's toolbar: no track of its
+ * own, because the toolbar already is one. `default` is shadcn's segmented
+ * track, kept for a consumer who wants it.
+ */
 const props = defineProps<
-  TabsListProps & { class?: HTMLAttributes['class'] }
+  TabsListProps & {
+    class?: HTMLAttributes['class'];
+    variant?: 'default' | 'bare';
+  }
 >();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'variant');
 </script>
 
 <template>
@@ -18,7 +26,9 @@ const delegatedProps = reactiveOmit(props, 'class');
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75',
+        props.variant === 'bare'
+          ? 'flex items-center gap-1'
+          : 'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75',
         props.class
       )
     "