@djangocfg/ui-core 2.1.532 → 2.1.533

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.532",
+  "version": "2.1.533",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.532",
+    "@djangocfg/i18n": "^2.1.533",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.532",
-    "@djangocfg/typescript-config": "^2.1.532",
+    "@djangocfg/i18n": "^2.1.533",
+    "@djangocfg/typescript-config": "^2.1.533",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/forms/slider/index.tsx

@@ -18,12 +18,32 @@ export interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slide
   storageType?: StorageType
   /** TTL in ms */
   storageTtl?: number
+  /**
+   * Rendered inside the track, behind the filled range.
+   *
+   * For a second quantity that shares the track's scale — a media player's
+   * buffered extent is the case this exists for. Positioned by the caller and
+   * never interactive: the slider owns every pointer event on the track.
+   */
+  trackDecoration?: React.ReactNode
+  /**
+   * Extra classes for the track, the filled range and the thumb.
+   *
+   * These parts live inside this component, so a consumer cannot reach them:
+   * a descendant selector would have to name classes it does not own, and
+   * arbitrary Tailwind variants targeting them are not reliably generated.
+   * A media scrubber needs a hairline track and a thumb that only appears on
+   * hover, which is what these exist for.
+   */
+  trackClassName?: string
+  rangeClassName?: string
+  thumbClassName?: string
 }
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   SliderProps
->(({ className, orientation = 'horizontal', storageKey, storageType, storageTtl, onValueChange, ...props }, ref) => {
+>(({ className, orientation = 'horizontal', storageKey, storageType, storageTtl, trackDecoration, trackClassName, rangeClassName, thumbClassName, onValueChange, ...props }, ref) => {
   const isVertical = orientation === 'vertical';
 
   const storageOptions: UseStoredValueOptions | undefined =
@@ -55,6 +75,7 @@ const Slider = React.forwardRef<
   return (
     <SliderPrimitive.Root
       ref={ref}
+      data-slot="slider"
       orientation={orientation}
       className={cn(
         "relative flex touch-none select-none",
@@ -66,19 +87,39 @@ const Slider = React.forwardRef<
       {...sliderProps}
     >
       <SliderPrimitive.Track
+        data-slot="slider-track"
         className={cn(
           "relative overflow-hidden rounded-full bg-primary/20",
-          isVertical ? "w-1.5 h-full grow" : "h-1.5 w-full grow"
+          isVertical ? "w-1.5 h-full grow" : "h-1.5 w-full grow",
+          trackClassName
         )}
       >
+        {/* Renders BEHIND the range, inside the track, so a consumer that has a
+            secondary quantity to show (a media player's buffered extent) does not
+            have to fork this component or overlay a second element. */}
+        {trackDecoration}
         <SliderPrimitive.Range
+          data-slot="slider-range"
           className={cn(
             "absolute bg-primary",
-            isVertical ? "w-full bottom-0" : "h-full left-0"
+            isVertical ? "w-full bottom-0" : "h-full left-0",
+            rangeClassName
           )}
         />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      {/* The accessible name and value text belong on the THUMB: that is where
+          Radix puts `role="slider"`, so a label left on the Root names a
+          generic element and the control itself stays anonymous. */}
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        aria-label={props['aria-label']}
+        aria-labelledby={props['aria-labelledby']}
+        aria-valuetext={props['aria-valuetext']}
+        className={cn(
+          "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          thumbClassName
+        )}
+      />
     </SliderPrimitive.Root>
   );
 })

package/src/components/index.ts

@@ -99,7 +99,7 @@ export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './over
 // ─────────────────────────────────────────────────────────────────────────────
 export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport } from './navigation/navigation-menu';
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut } from './navigation/menubar';
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup } from './navigation/dropdown-menu';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, revealOnRowInteraction } from './navigation/dropdown-menu';
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from './navigation/context-menu';
 export { PopoverRowButton } from './navigation/popover-row-button';
 export type { PopoverRowButtonProps } from './navigation/popover-row-button';

package/src/components/navigation/dropdown-menu/index.tsx

@@ -11,6 +11,24 @@ const DropdownMenu = DropdownMenuPrimitive.Root
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
+/**
+ * Classes for a trigger that stays hidden until the row is hovered or focused
+ * — the `…` on a list row, a tab, a tree item.
+ *
+ * The last clause is the one that is easy to miss and impossible to see in a
+ * screenshot of a closed menu: while the menu is OPEN, Radix has moved focus
+ * into the portalled panel and the pointer has left the row, so both reveal
+ * conditions are false and the trigger fades out under the menu it just
+ * opened. `data-state` is set by Radix on any trigger, so this composes with
+ * the primitive and with `MenuBuilder` alike.
+ *
+ * The row must be a `group`. Compose with `cn()` and the row's own sizing.
+ */
+const revealOnRowInteraction =
+  "opacity-0 transition-opacity group-hover:opacity-100 " +
+  "group-focus-within:opacity-100 focus-visible:opacity-100 " +
+  "data-[state=open]:opacity-100 motion-reduce:transition-none"
+
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal
@@ -232,6 +250,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 export {
   DropdownMenu,
   DropdownMenuTrigger,
+  revealOnRowInteraction,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,