@neo4j-ndl/react 4.25.10 → 5.0.0-alpha.0.b2b2481

package/skills/ndl-react/components/dialog.md

@@ -131,9 +131,9 @@ const Component = (props: { isOpen: boolean }) => {
   return (
     <div
       ref={ref}
-      className="n-flex n-flex-col n-items-center n-justify-center n-relative n-h-[500px] n-w-full"
+      className="flex flex-col items-center justify-center relative h-[500px] w-full"
     >
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton
           onClick={handleClick}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -181,7 +181,7 @@ const Component = (props: { isOpen: boolean }) => {
 
   return (
     <>
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton
           onClick={handleClick}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -233,7 +233,7 @@ const Component = (props: { isOpen: boolean }) => {
 
   return (
     <>
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton
           onClick={handleClick}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -282,7 +282,7 @@ const Component = (props: { isOpen: boolean }) => {
 
   return (
     <>
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton
           onClick={handleClick}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -332,7 +332,7 @@ const Component = (props: { isOpen: boolean }) => {
 
   return (
     <>
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton
           onClick={handleClick}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -344,7 +344,7 @@ const Component = (props: { isOpen: boolean }) => {
         htmlAttributes={{
           id: 'top-aligned-dialog',
         }}
-        className="n-align-top n-mt-token-16"
+        className="align-top mt-token-16"
         onClose={handleClose}
         isOpen={isOpen}
       >
@@ -389,7 +389,7 @@ const Component = (props: { isOpen: boolean }) => {
 
   return (
     <>
-      <div className="n-flex n-justify-center n-gap-token-16">
+      <div className="flex justify-center gap-token-16">
         <FilledButton
           onClick={() => handleClick('info')}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}
@@ -451,7 +451,7 @@ const Component = (props: { isOpen: boolean }) => {
 
   return (
     <>
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton
           onClick={handleClick}
           htmlAttributes={{ 'aria-haspopup': 'dialog' }}

package/skills/ndl-react/components/dismissible-tag.md

@@ -50,7 +50,7 @@ const Component = () => {
   };
 
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
+    <div className="flex flex-col gap-token-16">
       <DismissibleTag color="1" onRemove={handleRemove}>
         Categorical color 1
       </DismissibleTag>
@@ -95,7 +95,7 @@ const Component = () => {
   };
 
   return (
-    <div className="n-flex n-flex-row n-gap-token-8">
+    <div className="flex flex-row gap-token-8">
       <DismissibleTag size="x-small" onRemove={handleRemove}>
         X-Small
       </DismissibleTag>

package/skills/ndl-react/components/drawer.md

@@ -13,9 +13,6 @@ Import: `import { Drawer } from '@neo4j-ndl/react'`
 | `ariaLabel` | `string` |  |  | The aria-label to apply to the drawer. Required for accessibility when type is "modal" or "overlay". |
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `children` | `ReactNode` | ✅ |  | The content to display within the drawer. |
-| `closeOnClickOutside` | `boolean` |  | `false` | When type is "overlay", whether clicking outside the drawer closes it. Should be set to true for overlay drawers. - When type is "overlay" or "modal", this defaults to false. - When type is "push", no effect. |
-| `closeOnEscape` | `boolean` |  | `type === 'modal' ? true : false` | Whether pressing Escape closes the drawer. Should be set to true for overlay drawers. - When type is "modal", this defaults to true. - When type is "overlay", this defaults to false. - When type is "push", no effect. |
-| `closeOnFocusOut` | `boolean` |  |  | @deprecated overlay are now focus trapped by default, this prop has no effect anymore. |
 | `isCloseable` | `boolean` |  | `true` | Whether a close button (X) is displayed in the drawer. |
 | `isExpanded` | `boolean` | ✅ |  | Controls whether the drawer is open (expanded) or closed (collapsed). |
 | `isPortaled` | `boolean` |  | `false` | Whether to portal the content. Only applies when type is "overlay". Type "modal" is always portaled. |
@@ -25,6 +22,8 @@ Import: `import { Drawer } from '@neo4j-ndl/react'`
 | `position` | `'left' \| 'right'` |  | `left` | Position where the drawer appears on screen. By default, it appears from the left. |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `resizeableProps` | `ResizableProps` |  |  | To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable The property enable has default values set for bottom, bottomLeft etc based on the position prop. |
+| `shouldCloseOnClickOutside` | `boolean` |  | `false` | When type is "overlay", whether clicking outside the drawer closes it. Should be set to true for overlay drawers. - When type is "overlay" or "modal", this defaults to false. - When type is "push", no effect. |
+| `shouldCloseOnEscape` | `boolean` |  | `type === 'push' ? false : true` | Whether pressing Escape closes the drawer. Should be set to true for overlay drawers. - When type is "modal", this defaults to true. - When type is "overlay", this defaults to true. - When type is "push", no effect. |
 | `type` | `'modal' \| 'overlay' \| 'push'` |  | `overlay` | How the drawer affects the layout of sibling content. By default, it overlays content. |
 
 Where `ResizableProps` is the props for the `re-resizable` library. For more information, see the [re-resizable documentation](https://github.com/bokuweb/re-resizable).
@@ -47,16 +46,20 @@ Where `FloatingPortalProps` is the props for the `@floating-ui/react` library. F
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `children` | `ReactNode` | ✅ |  |  |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
 
 ## Accessibility
 
 ## Implementation guidelines
 
-A button that expands a Drawer should have `'aria-expanded'` set to whether the Drawer is expanded or not, following the [disclosure pattern]([https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)).
-A drawer of type "overlay" should set the props `closeOnClickOutside` and `closeOnFocusOut` to true. This ensures that it doesn't hide focus of interactive elements on the screen (WCAG 2.4.11). closeOnEscape is not strictly needed, but is recommended.
-Drawers of type "overlay" or "modal" implement the dialog pattern, meaning they need to be labelled to be accessible. Use either an `'aria-label'` or `'aria-labelledby'`.
-The `isResizable` prop renders a vertical resize handle that is usable with both mouse and keyboard, with the relevant aria-attributes set to be accessible using screen readers as well.
+A button that expands a Drawer should have `'aria-expanded'` set to whether the Drawer is expanded or not, following the [disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+
+Drawers of type "overlay" and "modal" are focus trapped and close on `Escape` by default (`shouldCloseOnEscape`). Keep it enabled, since a trapped drawer must offer a keyboard way out.
+A drawer of type "overlay" should also set `shouldCloseOnClickOutside` to true, so that it doesn't hide the focus of interactive elements on the screen (WCAG 2.4.11).
+Drawers of type "overlay" or "modal" implement the dialog pattern and must be labelled. Pass the required `ariaLabel` prop, which is applied as `aria-label` on the drawer.
+The `isResizeable` prop renders a vertical resize handle that is usable with both mouse and keyboard, with the relevant aria-attributes set to be accessible using screen readers as well.
 
 ## Examples
 
@@ -72,8 +75,8 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(true);
 
   const Placeholder = () => (
-    <div className="w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16">
-      <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+    <div className="w-full size-full flex flex-col items-center justify-center rounded-md p-token-16">
+      <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
         <FilledButton
           onClick={() => setIsExpanded(true)}
           htmlAttributes={{
@@ -87,7 +90,7 @@ const Component = () => {
   );
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer
         type="push"
         isExpanded={isExpanded}
@@ -161,13 +164,13 @@ import { Drawer } from '@neo4j-ndl/react';
 
 const Component = () => {
   const Placeholder = () => (
-    <div className="n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full">
-      <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md"></div>
+    <div className="size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full">
+      <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md"></div>
     </div>
   );
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer type="push" isExpanded={true} position="left" isCloseable={false}>
         <Drawer.Header>Drawer</Drawer.Header>
         <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>
@@ -193,24 +196,23 @@ const Component = () => {
   const referenceElement = useRef<HTMLButtonElement>(null);
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer
         isExpanded={isExpanded}
         onExpandedChange={() => setIsExpanded(false)}
         type="overlay"
         ariaLabel="Drawer"
         position="left"
-        closeOnClickOutside={true}
-        closeOnEscape={true}
+        shouldCloseOnClickOutside={true}
         isCloseable={true}
         style={{ maxWidth: '400px' }}
       >
         <Drawer.Header>Drawer</Drawer.Header>
         <Drawer.Body>
           If you use an overlay drawer, you should set{' '}
-          <code>closeOnClickOutside</code> to true. This is to align the mouse
-          behavior with the keyboard behavior, as focus is trapped inside the
-          drawer. This is to prevent the drawer from covering interactive
+          <code>shouldCloseOnClickOutside</code> to true. This is to align the
+          mouse behavior with the keyboard behavior, as focus is trapped inside
+          the drawer. This is to prevent the drawer from covering interactive
           elements outside the drawer.
         </Drawer.Body>
         <Drawer.Actions>
@@ -219,8 +221,8 @@ const Component = () => {
           </FilledButton>
         </Drawer.Actions>
       </Drawer>
-      <div className="n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full">
-        <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+      <div className="size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full">
+        <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
           <FilledButton
             onClick={() => setIsExpanded(true)}
             htmlAttributes={{
@@ -254,13 +256,13 @@ const Component = () => {
   const referenceElementRef = useRef<HTMLButtonElement | null>(null);
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer
         type="modal"
         isExpanded={isExpanded}
         onExpandedChange={() => setIsExpanded(false)}
         position="left"
-        closeOnEscape={true}
+        shouldCloseOnEscape={true}
         ariaLabel="Drawer"
         htmlAttributes={{
           id: 'drawer',
@@ -292,8 +294,8 @@ const Component = () => {
           </FilledButton>
         </Drawer.Actions>
       </Drawer>
-      <div className="n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full">
-        <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+      <div className="size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full">
+        <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
           <FilledButton
             onClick={() => setIsExpanded(true)}
             htmlAttributes={{
@@ -322,8 +324,8 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(true);
 
   const Placeholder = () => (
-    <div className="n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full">
-      <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+    <div className="size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full">
+      <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
         <FilledButton
           onClick={() => setIsExpanded(true)}
           htmlAttributes={{
@@ -337,7 +339,7 @@ const Component = () => {
   );
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer
         type="push"
         isExpanded={isExpanded}
@@ -371,8 +373,8 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(true);
 
   const Placeholder = () => (
-    <div className="n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full">
-      <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+    <div className="size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full">
+      <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
         <FilledButton
           onClick={() => setIsExpanded(true)}
           htmlAttributes={{
@@ -386,7 +388,7 @@ const Component = () => {
   );
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer
         type="push"
         isExpanded={isExpanded}
@@ -426,8 +428,8 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(true);
 
   const Placeholder = () => (
-    <div className="n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full">
-      <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+    <div className="size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full">
+      <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
         <FilledButton
           onClick={() => setIsExpanded(true)}
           htmlAttributes={{
@@ -441,7 +443,7 @@ const Component = () => {
   );
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Placeholder />
       <Drawer
         type="push"
@@ -476,8 +478,8 @@ const Component = () => {
   const [isExpanded, setIsExpanded] = useState(true);
 
   const Placeholder = () => (
-    <div className="w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16">
-      <div className="n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md">
+    <div className="w-full size-full flex flex-col items-center justify-center rounded-md p-token-16">
+      <div className="border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md">
         <FilledButton
           onClick={() => setIsExpanded(true)}
           htmlAttributes={{
@@ -491,7 +493,7 @@ const Component = () => {
   );
 
   return (
-    <div className="n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden">
+    <div className="h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden">
       <Drawer
         type="push"
         isExpanded={isExpanded}

package/skills/ndl-react/components/dropzone.md

@@ -273,17 +273,14 @@ const Component = () => {
 
       case UploadState.Success:
         return (
-          <div className="n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32">
+          <div className="flex flex-col justify-center items-center gap-y-token-32">
             <Typography
               variant="title-4"
-              className="n-text-success-text n-font-semibold"
+              className="text-success-text font-semibold"
             >
               Upload Complete!
             </Typography>
-            <Typography
-              variant="body-small"
-              className="n-text-neutral-text-weak"
-            >
+            <Typography variant="body-small" className="text-neutral-text-weak">
               Successfully uploaded: {files.map((file) => file.name).join(', ')}
             </Typography>
             <FilledButton onClick={resetUpload}>Upload More Files</FilledButton>
@@ -292,14 +289,14 @@ const Component = () => {
 
       case UploadState.Error:
         return (
-          <div className="n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32">
-            <XMarkIcon className="n-w-token-32 n-h-token-32 n-text-danger-text" />
-            <div className="n-flex n-flex-col n-gap-y-token-2">
+          <div className="flex flex-col justify-center items-center gap-y-token-32">
+            <XMarkIcon className="w-token-32 h-token-32 text-danger-text" />
+            <div className="flex flex-col gap-y-token-2">
               {errors.map((message, index) => (
                 <Typography
                   key={index}
                   variant="label"
-                  className="n-text-danger-text n-font-semibold"
+                  className="text-danger-text font-semibold"
                   htmlAttributes={{ role: 'alert' }}
                 >
                   {message}
@@ -327,11 +324,11 @@ const Component = () => {
         onError: handleError,
       }}
       supportedFilesDescription={
-        <div className="n-text-center n-flex n-flex-col n-gap-y-token-2">
-          <Typography variant="body-small" className="n-text-neutral-text-weak">
+        <div className="text-center flex flex-col gap-y-token-2">
+          <Typography variant="body-small" className="text-neutral-text-weak">
             Supports: Text files (.txt, .json) only
           </Typography>
-          <Typography variant="body-small" className="n-text-neutral-text-weak">
+          <Typography variant="body-small" className="text-neutral-text-weak">
             Max {CONFIG.MAX_FILES} files •{' '}
             {CONFIG.MAX_FILE_SIZE / (1024 * 1024)}MB per file
           </Typography>

package/skills/ndl-react/components/flex.md

@@ -74,7 +74,7 @@ const component = () => (
         key={`box-${index}`}
         borderRadius="xl"
         style={{ height: '80px', minWidth: '240px' }}
-        className="n-bg-primary-bg-weak n-border n-border-primary-border-strong"
+        className="bg-primary-bg-weak border border-primary-border-strong"
       ></Box>
     ))}
   </Flex>

package/skills/ndl-react/components/graph-label.md

@@ -33,7 +33,7 @@ import { GraphLabel } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <GraphLabel type="node" color={tokens.graph['1']}>
         Node
       </GraphLabel>
@@ -132,7 +132,7 @@ import { GraphLabel } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <GraphLabel type="node" size="small">
         Label
       </GraphLabel>
@@ -155,7 +155,7 @@ import { GraphLabel } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <GraphLabel type="node">Node</GraphLabel>
       <GraphLabel type="propertyKey">Property Key</GraphLabel>
       <GraphLabel type="relationship">Relationship</GraphLabel>

package/skills/ndl-react/components/icon-button-array.md

@@ -129,7 +129,7 @@ import {
 
 const Component = () => {
   return (
-    <div className="n-flex n-items-start n-gap-token-16">
+    <div className="flex items-start gap-token-16">
       <IconButtonArray orientation="horizontal" size="small">
         <CleanIconButton description="Search">
           <MagnifyingGlassIconOutline />

package/skills/ndl-react/components/icon-button.md

@@ -138,20 +138,20 @@ import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+    <div className="flex flex-col gap-token-16">
+      <div className="flex flex-row gap-token-16 items-center">
         <IconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </IconButton>
         <Typography variant="label"> Small</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <IconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </IconButton>
         <Typography variant="label"> Medium</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <IconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </IconButton>
@@ -174,14 +174,14 @@ import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
 
 const Component = () => {
   return (
-    <div className="n-flex n-flex-col n-gap-token-16">
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+    <div className="flex flex-col gap-token-16">
+      <div className="flex flex-row gap-token-16 items-center">
         <IconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </IconButton>
         <Typography variant="label">Default</Typography>
       </div>
-      <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
+      <div className="flex flex-row gap-token-16 items-center">
         <IconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </IconButton>

package/skills/ndl-react/components/inline-edit.md

@@ -10,6 +10,7 @@ Import: `import { InlineEdit } from '@neo4j-ndl/react'`
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `ariaLabel` | `string` |  |  | The aria label for the input. If not provided, defaults to the `label` text, or a generic "Inline edit input" string as a last resort. |
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `blurBehavior` | `'cancel' \| 'confirm' \| 'none'` |  | `confirm` | What the input should do on blur - "confirm" will confirm the value - "cancel" will cancel the value - "none" will do nothing |
 | `defaultValue` | `string` |  |  | The default input value. Use for an uncontrolled component. |
@@ -31,7 +32,9 @@ Import: `import { InlineEdit } from '@neo4j-ndl/react'`
 
 ## Implementation guidelines
 
-The InlineEdit component provides an accessible inline editing experience. It includes proper ARIA labels, keyboard navigation support (Enter to confirm, Escape to cancel), and focus management. The component supports both controlled and uncontrolled modes, with appropriate screen reader announcements for state changes.
+The InlineEdit component includes proper ARIA labels, keyboard navigation support (Enter to confirm, Escape to cancel), and focus management. The component supports both controlled and uncontrolled modes, with appropriate screen reader announcements for state changes.
+
+You should set `ariaLabel` (or a string `label`) rather than relying on the generic fallback which can not describe the field properly. The read-view button's name includes the current value in order for the screen reader users to be aware of what they are editing.
 
 ## Examples
 

package/skills/ndl-react/components/loading-spinner.md

@@ -45,7 +45,7 @@ import { LoadingSpinner } from '@neo4j-ndl/react';
 
 const Component = () => {
   return (
-    <div className="n-flex n-gap-token-16">
+    <div className="flex gap-token-16">
       <LoadingSpinner size="small" />
 
       <LoadingSpinner size="medium" />

package/skills/ndl-react/components/logo.md

@@ -24,7 +24,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Logo } from '@neo4j-ndl/react';
 
 const Component = () => {
-  return <Logo className="n-w-24" />;
+  return <Logo className="w-24" />;
 };
 
 export default Component;
@@ -38,7 +38,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Logo } from '@neo4j-ndl/react';
 
 const Component = () => {
-  return <Logo className="n-w-24" color="black" />;
+  return <Logo className="w-24" color="black" />;
 };
 
 export default Component;
@@ -52,7 +52,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Logo } from '@neo4j-ndl/react';
 
 const Component = () => {
-  return <Logo className="n-w-24" type="icon" />;
+  return <Logo className="w-24" type="icon" />;
 };
 
 export default Component;

package/skills/ndl-react/components/menu.md

@@ -14,11 +14,11 @@ Import: `import { Menu } from '@neo4j-ndl/react'`
 | `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
 | `children` | `ReactNode` |  |  | Content displayed inside the menu |
 | `description` | `ReactNode` |  |  | Optional description for nested trigger rendering |
-| `icon` | `ReactNode` |  |  | Optional icon for nested trigger rendering |
 | `isDisabled` | `boolean` |  |  | Whether the menu trigger is disabled |
 | `isOpen` | `boolean` |  |  | Whether the menu is open or closed (uncontrolled when omitted) |
 | `isPortaled` | `boolean` |  | `true` | Whether the menu should be wrapped in a floating portal |
 | `isRoot` | `boolean` |  |  | Whether the menu is a root menu instance. This is set internally by the component based on nesting |
+| `leadingVisual` | `ReactNode` |  |  | Optional leading visual for nested trigger rendering (e.g. an icon) |
 | `minWidth` | `number` |  |  | Minimum width in pixels for the menu component |
 | `onClose` | `((event: Event, closeReason: { type: "backdropClick" \| "itemClick" \| "escapeKeyDown" \| "focusOut"; id?: string; }) => void) \| undefined` |  |  | Callback function that is called when the menu closes |
 | `placement` | `'bottom-end-bottom-start' \| 'bottom-end-top-end' \| 'bottom-middle-top-middle' \| 'bottom-start-bottom-end' \| 'bottom-start-top-start' \| 'middle-end-middle-start' \| 'middle-start-middle-end' \| 'top-end-bottom-end' \| 'top-end-top-start' \| 'top-middle-bottom-middle' \| 'top-start-bottom-start' \| 'top-start-top-end'` |  |  | The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element. |
@@ -243,21 +243,21 @@ const Component = () => {
             <Typography variant="display">This can be any element</Typography>
           }
         />
-        <Menu.Item title="Danger action 1" className="n-text-danger-text" />
+        <Menu.Item title="Danger action 1" className="text-danger-text" />
         <Menu.Item
           title="Danger action 2"
-          className="n-text-danger-text"
+          className="text-danger-text"
           leadingVisual={
-            <Square2StackIconOutline className="n-text-danger-icon" />
+            <Square2StackIconOutline className="text-danger-icon" />
           }
         />
         <Menu title="More actions" description="Some additional actions">
           <Menu.Item
             title="Danger action 3"
-            className="n-text-danger-text"
+            className="text-danger-text"
             isDisabled={true}
           />
-          <Menu.Item title="Danger action 4" className="n-text-danger-text" />
+          <Menu.Item title="Danger action 4" className="text-danger-text" />
         </Menu>
       </Menu>
       <DropdownButton
@@ -295,7 +295,7 @@ const Component = () => {
 
   return (
     <>
-      <div className="n-flex n-justify-center">
+      <div className="flex justify-center">
         <FilledButton onClick={handleClick}>Open Dialog</FilledButton>
       </div>
       <Dialog
@@ -305,7 +305,7 @@ const Component = () => {
       >
         <Dialog.Header>Menu in Dialog</Dialog.Header>
         <Dialog.Content>
-          <div className="n-flex n-justify-center">
+          <div className="flex justify-center">
             <DropdownButton
               isOpen={isOpen}
               onClick={handleMenuClick}
@@ -330,7 +330,7 @@ const Component = () => {
             <Menu
               title="Copy as"
               description="Copying as something"
-              icon={<Square2StackIconOutline />}
+              leadingVisual={<Square2StackIconOutline />}
             >
               <Menu.Item title="Text" />
               <Menu.Item title="Video" />
@@ -459,7 +459,7 @@ const Component = () => {
         <Menu
           title="Copy as"
           description="Copying as something"
-          icon={<Square2StackIconOutline />}
+          leadingVisual={<Square2StackIconOutline />}
         >
           <Menu.Item title="Text" />
           <Menu.Item title="Video" />
@@ -624,7 +624,7 @@ const Component = () => {
           />
         </Menu.Group>
       </Menu>
-      <div className="n-flex n-flex-col n-gap-token-4 n-items-center">
+      <div className="flex flex-col gap-token-4 items-center">
         <Typography variant="body-medium">
           Selected option: <strong>{selectedOption}</strong>
         </Typography>
@@ -703,7 +703,7 @@ const Component = () => {
           }}
         />
       </Menu>
-      <div className="n-flex n-flex-col n-gap-token-4 n-items-center">
+      <div className="flex flex-col gap-token-4 items-center">
         <Typography variant="body-medium">
           Selected option: <strong>{selectedOption}</strong>
         </Typography>
@@ -912,11 +912,11 @@ const Component = () => {
         <Menu
           title="Action 3.1"
           description="Action with sub menu"
-          icon={<PlusIconOutline />}
+          leadingVisual={<PlusIconOutline />}
         >
           <Menu.Item title="Text" />
           <Menu.Item title="Video" />
-          <Menu title="Image" icon={<PhotoIconOutline />}>
+          <Menu title="Image" leadingVisual={<PhotoIconOutline />}>
             <Menu.Item title=".png" />
             <Menu.Item title=".jpg" />
           </Menu>