najm-kit 2.11.8 → 2.11.10

package/CHANGELOG.md

@@ -1,4 +1,36 @@
-# Changelog
+# 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`,
+  a branch that predates the container measurement added in 2.2.0 and was never
+  reconciled with it: `calculatedCardPageSize` was measured and published, but
+  only ever applied to a server-paginated grid. A 500-row list rendered 500
+  cards on page one, reported a single page, and showed 500 as the current
+  Rows/page value. The measured size is now applied to an uncontrolled card grid
+  too, through the guards that already keep a server-paginated one stable —
+  geometry bucketing, the per-container report budget, and the deferral until
+  real cards have been measured. That loop is a property of the measurement
+  rather than of fetching: page size decides which cards render, and rendered
+  cards are what card height is measured from. Rendering every supplied row
+  stays the behavior wherever there is nothing to measure against, so
+  `dynamicHeight={false}` and a container that has not yet reported a layout are
+  unchanged, and a controlled `pagination` prop or an explicit Rows/page choice
+  still wins.
 
 ## 2.11.8 - 2026-08-28
 

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

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
@@ -12207,15 +12209,17 @@ function useTable(effectiveViewModeOverride) {
   useLayoutEffect(() => {
     if (manualPagination || isPaginationControlled || isPageSizeUserSelected) return;
     if (dynamicHeight && renderedMode === "table") table.setPageSize(calculatedPageSize);
-    if (viewMode === "cards" && cardPagination.mode === "paged") {
+    const cardsAreUnmeasured = !dynamicHeight || !hasMeasuredLayout;
+    if (viewMode === "cards" && cardPagination.mode === "paged" && cardsAreUnmeasured) {
       table.setPageSize(data.length || 9999);
     }
-  }, [calculatedPageSize, dynamicHeight, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination, isPaginationControlled, isPageSizeUserSelected]);
+  }, [calculatedPageSize, dynamicHeight, hasMeasuredLayout, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination, isPaginationControlled, isPageSizeUserSelected]);
   const dynamicPageSizeTarget = renderedMode === "cards" ? calculatedCardPageSize : calculatedPageSize;
   const geometryKey = `${Math.round(measuredBodyWidth / GEOMETRY_BUCKET_PX)}x${Math.round(measuredBodyHeight / GEOMETRY_BUCKET_PX)}`;
   const reportedGeometryRef = useRef(null);
   useLayoutEffect(() => {
-    if (!manualPagination || !dynamicHeight || isPageSizeUserSelected) return;
+    if (!dynamicHeight || isPageSizeUserSelected) return;
+    if (!manualPagination && (isPaginationControlled || renderedMode !== "cards")) return;
     if (cardPagination.mode !== "paged") return;
     if (!hasMeasuredLayout || measuredBodyHeight <= 0) return;
     if (!dynamicPageSizeTarget || dynamicPageSizeTarget < 1) return;
@@ -12237,6 +12241,7 @@ function useTable(effectiveViewModeOverride) {
     return () => clearTimeout(timer);
   }, [
     manualPagination,
+    isPaginationControlled,
     dynamicHeight,
     isPageSizeUserSelected,
     cardPagination.mode,
@@ -13348,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);
@@ -14527,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";
@@ -14563,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
   );
@@ -14584,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,
         {
@@ -14714,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" }),
@@ -14755,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 })
         ]
       }
@@ -14788,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"
@@ -14810,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: [
@@ -14822,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" })
             }
@@ -14979,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;
@@ -15134,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
         ),
@@ -15142,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,
@@ -15155,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" })
               ]
             }
@@ -15169,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.8",
+  "version": "2.11.10",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",