najm-kit 2.11.9 → 2.11.11

package/CHANGELOG.md

@@ -1,6 +1,19 @@
-# Changelog
-
-## 2.11.9 - 2026-08-30
+# Changelog
+
+## 2.11.10 - 2026-09-03
+
+- Fixed the selected numbered `NTable` pagination button inheriting the regular
+  foreground colour over its filled primary style. The active page now keeps
+  the primary button foreground token, which is white in the light theme.
+- Fixed focused invalid inputs combining a destructive border with the normal
+  theme focus colour. `BaseInput` now keeps the visible keyboard-focus ring but
+  colours it from the destructive token for both directly focused composite
+  controls and wrappers whose child has `:focus-visible`.
+- Made the desktop and mobile sidebar use logical inline edges, spacing, border
+  utilities, chevrons, and drag direction so the complete rail behaves
+  correctly in both LTR and RTL layouts.
+
+## 2.11.9 - 2026-08-30
 
 - Fixed card grids that paginate client-side rendering their entire dataset on
   one page. `useTable` pinned an uncontrolled paged card list to `data.length`,

package/dist/adapters/app.mjs

@@ -1,9 +1,9 @@
 'use client';
-import { FormDevToolsProvider, NBrandingStateProvider, NajmFormatProvider } from '../chunk-A7BKZZJ4.mjs';
-export { NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState } from '../chunk-A7BKZZJ4.mjs';
+import { FormDevToolsProvider, NBrandingStateProvider, NajmFormatProvider } from '../chunk-W2HMBUZ4.mjs';
+export { NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState } from '../chunk-W2HMBUZ4.mjs';
 import { NajmNextUIProvider } from '../chunk-T6RL7TSQ.mjs';
 import '../chunk-6UDJNTJ6.mjs';
-import '../chunk-ONE7GLIH.mjs';
+import '../chunk-M5VGBZ7R.mjs';
 import '../chunk-LK3SMYUP.mjs';
 import '../chunk-JABLSOQN.mjs';
 import '../chunk-TFHWLE7N.mjs';

package/dist/{chunk-ONE7GLIH.mjs → chunk-M5VGBZ7R.mjs}

@@ -86,21 +86,27 @@ var SURFACE_BORDER_CLASSES = {
   top: "najm-border-t border-border",
   right: "najm-border-r border-border",
   bottom: "najm-border-b border-border",
-  left: "najm-border-l border-border"
+  left: "najm-border-l border-border",
+  start: "najm-border-s border-border",
+  end: "najm-border-e border-border"
 };
 var SIDEBAR_BORDER_CLASSES = {
   all: "najm-border border-sidebar-border",
   top: "najm-border-t border-sidebar-border",
   right: "najm-border-r border-sidebar-border",
   bottom: "najm-border-b border-sidebar-border",
-  left: "najm-border-l border-sidebar-border"
+  left: "najm-border-l border-sidebar-border",
+  start: "najm-border-s border-sidebar-border",
+  end: "najm-border-e border-sidebar-border"
 };
 var BORDER_RESET_CLASSES = {
   all: "border-0",
   top: "border-t-0",
   right: "border-r-0",
   bottom: "border-b-0",
-  left: "border-l-0"
+  left: "border-l-0",
+  start: "border-s-0",
+  end: "border-e-0"
 };
 function surfaceBorderClasses(bordered = true, side = "all") {
   return bordered === false ? BORDER_RESET_CLASSES[side] : SURFACE_BORDER_CLASSES[side];

package/dist/{chunk-A7BKZZJ4.mjs → chunk-W2HMBUZ4.mjs}

@@ -1,5 +1,5 @@
 import { useResolvedFeedbackLabels, useNajmPreferencesContext } from './chunk-6UDJNTJ6.mjs';
-import { Button } from './chunk-ONE7GLIH.mjs';
+import { Button } from './chunk-M5VGBZ7R.mjs';
 import { useNajmDesign, cn } from './chunk-LK3SMYUP.mjs';
 import { humanizeToken, DEFAULT_PLACEHOLDER, formatRelativeTime, formatTime, formatDateTime, formatDate, formatPercent, formatNumber, formatCurrency } from './chunk-JABLSOQN.mjs';
 import * as React3 from 'react';

package/dist/index.d.ts

@@ -316,7 +316,7 @@ interface NajmDesignProviderProps {
  */
 declare function NajmDesignProvider({ config, mode, className, children, }: NajmDesignProviderProps): react_jsx_runtime.JSX.Element;
 
-type NajmBorderSide = 'all' | 'top' | 'right' | 'bottom' | 'left';
+type NajmBorderSide = 'all' | 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
 /**
  * Border utility for structural surfaces (cards, tables, dividers, side rails).
  * `bordered === false` returns a per-side reset so primitives that already
@@ -558,7 +558,7 @@ type DialogPadding = "none" | "sm" | "md" | "lg";
 interface DialogContentProps extends React$1.ComponentProps<typeof DialogPrimitive.Content> {
     /** Controls the padding of the dialog surface. `none` also collapses the header/body/footer gap. Defaults to `sm` on mobile, `md` on desktop. */
     padding?: DialogPadding;
-    /** Hides the built-in top-right close (X). Use when the content provides its own close control (e.g. inside a page header). */
+    /** Hides the built-in close (X) in the top inline-end corner. Use when the content provides its own close control (e.g. inside a page header). */
     hideClose?: boolean;
 }
 declare function DialogContent({ className, children, padding, hideClose, onOpenAutoFocus, onCloseAutoFocus, ...props }: DialogContentProps): react_jsx_runtime.JSX.Element;

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { resolveAvatarSrc } from './chunk-BEGOH366.mjs';
 export { isPlaceholderAvatar, resolveAvatarSrc } from './chunk-BEGOH366.mjs';
-import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-A7BKZZJ4.mjs';
-export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-A7BKZZJ4.mjs';
+import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-W2HMBUZ4.mjs';
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-W2HMBUZ4.mjs';
 import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels } from './chunk-6UDJNTJ6.mjs';
 export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-6UDJNTJ6.mjs';
 import { NajmScroll, useNajmScrollViewport, useTableStore, TableStoreContext, NTableJson } from './chunk-5JVFMOLI.mjs';
 export { NTableJson, NajmScroll, TableStoreContext, useTableStore } from './chunk-5JVFMOLI.mjs';
-import { inputBorderClasses, Button, NIcon, surfaceBorderClasses, buttonVariants, NButton, sidebarBorderClasses } from './chunk-ONE7GLIH.mjs';
-export { Button, NButton, NIcon, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses } from './chunk-ONE7GLIH.mjs';
+import { inputBorderClasses, Button, NIcon, surfaceBorderClasses, buttonVariants, NButton, sidebarBorderClasses } from './chunk-M5VGBZ7R.mjs';
+export { Button, NButton, NIcon, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses } from './chunk-M5VGBZ7R.mjs';
 import { useNajmComponentStyle, cn, NajmThemeContainerCtx, useNajmThemeMode, useNajmDesign, composePreset } from './chunk-LK3SMYUP.mjs';
 export { NajmDesignProvider, NajmThemeProvider, cn, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode } from './chunk-LK3SMYUP.mjs';
 export { DEFAULT_CARD_BREAKPOINT, DEFAULT_CARD_PAGINATION_KEY_PREFIX, buildCardPaginationLabels, createCardPagination, useCardViewport, useDesktopTableMode, useMediaQuery } from './chunk-OUS7OYVA.mjs';
@@ -453,6 +453,7 @@ var inputVariants = cva(
   }
 );
 var ERROR_BORDER = "border !border-red-600";
+var ERROR_FOCUS_RING = "focus-visible:ring-destructive/20 has-[:focus-visible]:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:has-[:focus-visible]:ring-destructive/40";
 var FOCUS_INTERACTIVE_BASE = "border focus-within:border-primary";
 var HOVER_INTERACTIVE_BASE = "hover:border-primary";
 var STATIC_BASE = "border";
@@ -492,6 +493,7 @@ var BaseInput = React66__default.forwardRef(
           // fields and the multi-select trigger came out of the acceptance walk
           // as tab stops with no visible indicator at all.
           !isGhost && focusRingWithinClasses,
+          !isGhost && isError && ERROR_FOCUS_RING,
           !isGhost && borderClass,
           !isGhost && colorClass,
           className
@@ -1002,7 +1004,7 @@ function SheetContent({ className, portalClassName, side, children, ...props })
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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", children: [
+          /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 end-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx(X, { className: "size-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -1199,7 +1201,7 @@ function DialogContent({
         ...props,
         children: [
           children,
-          !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background cursor-pointer focus:ring-ring absolute top-4 right-4 rounded-xs text-muted-foreground hover:text-foreground transition-colors 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", children: [
+          !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "ring-offset-background cursor-pointer focus:ring-ring absolute top-4 end-4 rounded-xs text-muted-foreground hover:text-foreground transition-colors 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", children: [
             /* @__PURE__ */ jsx(XIcon, {}),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -1209,7 +1211,7 @@ function DialogContent({
   ] }) });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-start", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
@@ -1880,7 +1882,7 @@ function DialogChrome({
       DialogHeader,
       {
         className: cn(
-          "flex-row items-center justify-between gap-3 border-b border-border bg-secondary text-left text-secondary-foreground",
+          "flex-row items-center justify-between gap-3 border-b border-border bg-secondary text-start text-secondary-foreground",
           windowHeaderSpacing[resolvedPadding],
           headerClassName
         ),
@@ -2279,7 +2281,7 @@ function NDeleteDialog({
     {
       className: cn(
         "h-auto max-w-[380px] gap-0 rounded-[18px] border border-border bg-card p-6 pt-8 shadow-2xl dark:border-0 dark:bg-[#222b38]",
-        "[&>button]:right-4 [&>button]:top-4 [&>button]:flex [&>button]:size-6 [&>button]:items-center [&>button]:justify-center",
+        "[&>button]:end-4 [&>button]:top-4 [&>button]:flex [&>button]:size-6 [&>button]:items-center [&>button]:justify-center",
         "[&>button]:rounded-full [&>button]:bg-muted [&>button]:text-muted-foreground [&>button]:opacity-100 [&>button]:ring-offset-0",
         "[&>button]:hover:bg-secondary [&>button]:hover:text-foreground dark:[&>button]:bg-[#4d5a6d] dark:[&>button]:text-white dark:[&>button]:hover:bg-[#647186] dark:[&>button]:hover:text-white",
         className
@@ -13351,7 +13353,7 @@ function CardLoadMorePagination({
     }
   );
 }
-var navButtonClass = "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70";
+var navButtonClass = "h-8 w-8 p-0 disabled:text-muted-foreground disabled:opacity-70";
 var chevronClass = "h-4 w-4 rtl:-scale-x-100";
 function useLowerBoundPageCountWarning(manualPagination, pageCount, pagination) {
   const previous = React66__default.useRef(null);
@@ -14437,7 +14439,7 @@ function NSmartPasteDialog({
             onClick: handleMerge,
             disabled: !preview || preview.newCount === 0,
             children: [
-              /* @__PURE__ */ jsx(Merge, { className: "h-3.5 w-3.5 mr-1.5" }),
+              /* @__PURE__ */ jsx(Merge, { className: "h-3.5 w-3.5 me-1.5" }),
               preview ? `Merge ${preview.newCount} ${itemLabel}${preview.newCount !== 1 ? "s" : ""}` : "Merge"
             ]
           }
@@ -14530,7 +14532,7 @@ function NSidebarBrand({ logo, collapsed, linkComponent: Link, className }) {
     ] }) : null
   ] });
   const wrapper = cn(
-    "flex min-w-0 items-center gap-2.5 text-left",
+    "flex min-w-0 items-center gap-2.5 text-start",
     !collapsed && !showText && !isChip && "mx-auto"
   );
   const interactive = "cursor-pointer transition-opacity hover:opacity-80";
@@ -14566,9 +14568,9 @@ function NSidebarItem({
     if (childActive) setOpen(true);
   }, [childActive]);
   const baseClasses = cn(
-    "flex items-center gap-3 w-full rounded-md text-sm px-2 font-medium transition-colors h-8 text-left",
-    depth > 0 && "pl-7",
-    collapsed && "pl-[calc((var(--rail,4rem)-var(--sidebar-edge-width,0px))/2-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem))]",
+    "flex items-center gap-3 w-full rounded-md text-sm px-2 font-medium transition-colors h-8 text-start",
+    depth > 0 && "ps-7",
+    collapsed && "ps-[calc((var(--rail,4rem)-var(--sidebar-edge-width,0px))/2-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem))]",
     item.disabled ? "opacity-50 cursor-not-allowed" : active ? "cursor-pointer bg-sidebar-primary text-sidebar-primary-foreground" : "cursor-pointer text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     classNames?.sidebarItem
   );
@@ -14587,7 +14589,7 @@ function NSidebarItem({
     Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
-      item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 ml-auto", children: item.badge }),
+      item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 ms-auto", children: item.badge }),
       hasChildren && /* @__PURE__ */ jsx(
         ChevronDown,
         {
@@ -14717,7 +14719,7 @@ function DefaultFooter({
   collapsed = false
 }) {
   if (!onSettings && !onLogout) return null;
-  const itemClass = "flex h-8 w-full cursor-pointer items-center gap-3 rounded-md px-2 text-left text-sm font-medium text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors";
+  const itemClass = "flex h-8 w-full cursor-pointer items-center gap-3 rounded-md px-2 text-start text-sm font-medium text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
     onSettings && /* @__PURE__ */ jsxs("button", { type: "button", onClick: onSettings, className: itemClass, "aria-label": settingsLabel, title: settingsLabel, children: [
       /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 shrink-0" }),
@@ -14758,12 +14760,12 @@ function NSidebarFooter({
         onClick: onToggleCollapsed,
         className: cn(
           "flex items-center w-full cursor-pointer rounded-md text-sm font-medium transition-colors h-8 text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-          "gap-3 px-2 text-left"
+          "gap-3 px-2 text-start"
         ),
         "aria-label": collapsed ? expandLabel : collapseLabel,
         title: collapsed ? expandLabel : collapseLabel,
         children: [
-          /* @__PURE__ */ jsx(CollapseIcon, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx(CollapseIcon, { className: "h-4 w-4 shrink-0 rtl:-scale-x-100" }),
           !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: collapseLabel })
         ]
       }
@@ -14791,7 +14793,7 @@ function NSidebarMobile({
         type: "button",
         onClick: onOpen,
         className: cn(
-          "fixed top-3 left-3 z-50 p-2 rounded-lg bg-sidebar najm-border border-sidebar-border shadow-md text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent transition-colors",
+          "fixed top-3 start-3 z-50 p-2 rounded-lg bg-sidebar najm-border border-sidebar-border shadow-md text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent transition-colors",
           mobileClass,
           hamburgerClassName,
           open && "hidden"
@@ -14813,10 +14815,10 @@ function NSidebarMobile({
       {
         "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
         className: cn(
-          "fixed inset-y-0 left-0 z-50 bg-sidebar text-sidebar-foreground flex flex-col transition-transform duration-200",
-          sidebarBorderClasses(bordered, "right"),
+          "fixed inset-y-0 start-0 z-50 bg-sidebar text-sidebar-foreground flex flex-col transition-transform duration-200",
+          sidebarBorderClasses(bordered, "end"),
           mobileClass,
-          open ? "translate-x-0" : "-translate-x-full"
+          open ? "translate-x-0" : "-translate-x-full rtl:translate-x-full"
         ),
         style: { width },
         children: [
@@ -14825,7 +14827,7 @@ function NSidebarMobile({
             {
               type: "button",
               onClick: onClose,
-              className: "absolute top-3 right-3 z-10 p-1 rounded-md hover:bg-sidebar-accent text-sidebar-foreground/70",
+              className: "absolute top-3 end-3 z-10 p-1 rounded-md hover:bg-sidebar-accent text-sidebar-foreground/70",
               "aria-label": closeLabel,
               children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
             }
@@ -14982,13 +14984,14 @@ function NSidebar({
   }, [collapsed, setCollapsedState]);
   const handleRailPointerDown = useCallback((e) => {
     if (e.button !== 0) return;
+    const inlineSign = getComputedStyle(e.currentTarget).direction === "rtl" ? -1 : 1;
     const startX = e.clientX;
     const startCollapsed = collapsed;
     const threshold = 24;
     let resolved = false;
     setRailDragging(true);
     const onMove = (ev) => {
-      const dx = ev.clientX - startX;
+      const dx = (ev.clientX - startX) * inlineSign;
       if (!resolved && !startCollapsed && dx < -threshold) {
         resolved = true;
         suppressRailClickRef.current = true;
@@ -15137,7 +15140,7 @@ function NSidebar({
         className: cn(
           "relative z-10 flex flex-col h-full bg-sidebar text-sidebar-foreground transition-all duration-200 shrink-0",
           desktopClass,
-          sidebarBorderClasses(bordered, "right"),
+          sidebarBorderClasses(bordered, "end"),
           classNames?.sidebar,
           className
         ),
@@ -15145,7 +15148,7 @@ function NSidebar({
           width: desktopCollapsed ? collapsedWidth : expandedWidth,
           ["--rail"]: railVar,
           ["--sidebar-edge-width"]: sidebarEdgeWidth,
-          ...bordered !== false && recipe?.borderWidth ? { borderRightWidth: recipe.borderWidth } : {}
+          ...bordered !== false && recipe?.borderWidth ? { borderInlineEndWidth: recipe.borderWidth } : {}
         },
         children: [
           sidebarInner,
@@ -15158,9 +15161,9 @@ function NSidebar({
               "data-dragging": railDragging ? "true" : void 0,
               onPointerDown: handleRailPointerDown,
               onClick: handleRailClick,
-              className: "group/rail absolute inset-y-0 right-0 z-20 flex w-3 translate-x-1/2 cursor-ew-resize touch-none select-none items-center justify-center border-0 bg-transparent p-0",
+              className: "group/rail absolute inset-y-0 end-0 z-20 flex w-3 translate-x-1/2 rtl:-translate-x-1/2 cursor-ew-resize touch-none select-none items-center justify-center border-0 bg-transparent p-0",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-1/2 w-0.5 translate-x-1/2 bg-sidebar-ring opacity-0 transition-opacity duration-150 group-hover/rail:opacity-100 group-data-[dragging=true]/rail:opacity-100" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 end-1/2 w-0.5 translate-x-1/2 rtl:-translate-x-1/2 bg-sidebar-ring opacity-0 transition-opacity duration-150 group-hover/rail:opacity-100 group-data-[dragging=true]/rail:opacity-100" }),
                 /* @__PURE__ */ jsx("span", { className: "relative h-9 w-1 rounded-full bg-sidebar-border transition-all duration-150 group-hover/rail:h-12 group-hover/rail:bg-sidebar-ring group-data-[dragging=true]/rail:bg-sidebar-ring" })
               ]
             }
@@ -15172,8 +15175,8 @@ function NSidebar({
               onClick: handleToggleCollapsed,
               "aria-label": collapsed ? expandLabel : collapseLabel,
               title: collapsed ? expandLabel : collapseLabel,
-              className: "absolute right-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-              children: desktopCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
+              className: "absolute end-0 top-7 z-20 flex size-6 -translate-y-1/2 translate-x-1/2 rtl:-translate-x-1/2 cursor-pointer items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+              children: desktopCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 rtl:-scale-x-100" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 rtl:-scale-x-100" })
             }
           )
         ]

package/dist/json.mjs

@@ -1,5 +1,5 @@
 export { NTableJson } from './chunk-5JVFMOLI.mjs';
-import { Button } from './chunk-ONE7GLIH.mjs';
+import { Button } from './chunk-M5VGBZ7R.mjs';
 import { cn } from './chunk-LK3SMYUP.mjs';
 import './chunk-TFHWLE7N.mjs';
 import { useMemo, useRef, useCallback } from 'react';

package/dist/theme.css

@@ -26,7 +26,7 @@
 @source inline("{sm,md,lg,xl,2xl}:table-cell");
 @source inline("border-{black,white}");
 @source inline("border-{gray,slate,zinc,neutral,stone,red,orange,amber,yellow,green,teal,blue,indigo,purple}{,-600}");
-@source inline("najm-border najm-border-t najm-border-r najm-border-b najm-border-l");
+@source inline("najm-border najm-border-t najm-border-r najm-border-b najm-border-l najm-border-s najm-border-e");
 
 /* NGrid / NGridItem build column and span classes dynamically. */
 @source inline("grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
@@ -281,6 +281,16 @@ input:autofill {
   border-left-width: var(--border-width);
 }
 
+.najm-border-s {
+  border-inline-start-style: solid;
+  border-inline-start-width: var(--border-width);
+}
+
+.najm-border-e {
+  border-inline-end-style: solid;
+  border-inline-end-width: var(--border-width);
+}
+
 [data-radix-popper-content-wrapper] {
   z-index: 10000 !important;
 }
@@ -307,10 +317,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +377,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.11.9",
+  "version": "2.11.11",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",